title: customizing lightSlider slide
body: <p>I am using the light slider jquery plugin to slide the html content. However the plugin works but some slides are mis aligned.</p>
  
  <p>Here is the <a href="https://jsfiddle.net/2patspw2/1998/" rel="nofollow noreferrer">jsfiddle.</a> regarding this issue.</p>
  
  <p>Here is my <strong>html:</strong></p>
  
  <p>Here the 4 list items should be displayed as 4 slides, but they are not. Only first and second slides are displaying properly. Somehow two and three are mis aligned.</p>
  
  <pre><code>&lt;div class="demo"&gt;
      &lt;ul id="light-slider"&gt;
          &lt;li&gt;
              &lt;h3&gt;1&lt;/h3&gt;
              &lt;p&gt;Hello&lt;/p&gt;
              &lt;p&gt;Hello, what the hell ?&lt;/p&gt;
              &lt;p&gt;Hello, lets put his long terxt.....so long and, so long&lt;/p&gt;
              &lt;p&gt;Hello&lt;/p&gt;
  
          &lt;/li&gt;
          &lt;li&gt;
              &lt;h3&gt;First Slide&lt;/h3&gt;
              &lt;p&gt;Lorem ipsum Cupidatat quis pariatur anim.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum Cupidatat quis pariatur anim.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum Cupidatat quis pariatur anim.&lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;h3&gt;Second Slide&lt;/h3&gt;
              &lt;p&gt;Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum Cupidatat quis pariatur anim.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum Cupidatat quis pariatur anim.&lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;h3&gt;Third Slide&lt;/h3&gt;
              &lt;p&gt;Lorem ipsum Cupidatat quis pariatur anim.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum Cupidatat quis pariatur anim.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum Cupidatat quis pariatur anim.&lt;/p&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>  $(document).ready(function() {
        $("#light-slider").lightSlider({
            item: 1,
            autoWidth: true,
            slideMove: 1, // slidemove will be 1 if loop is true
            slideMargin: 40,
  
            addClass: '',
            mode: "slide",
            useCSS: true,
            cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
            easing: 'linear', //'for jquery animation',////
  
            speed: 400, //ms'
            auto: true,
            pauseOnHover: false,
            loop: false,
            slideEndAnimation: true,
            pause: 2000,
  
            keyPress: false,
            controls: true,
            prevHtml: '',
            nextHtml: '',
  
            rtl:false,
            adaptiveHeight:false,
  
            vertical:false,
            verticalHeight:500,
            vThumbWidth:100,
  
            thumbItem:1,
            pager: true,
            gallery: false,
            galleryMargin: 5,
            thumbMargin: 5,
            currentPagerPosition: 'middle',
  
            enableTouch:true,
            enableDrag:true,
            freeMove:true,
            swipeThreshold: 40,
  
            responsive : [],
  
            onBeforeStart: function (el) {},
            onSliderLoad: function (el) {},
            onBeforeSlide: function (el) {},
            onAfterSlide: function (el) {},
            onBeforeNextSlide: function (el) {},
            onBeforePrevSlide: function (el) {}
        });
    });
  </code></pre>
  
  <p><strong>Output:</strong>
  The slide 1 text doesnt fit to screen, it goes off the screen.</p>
  
  <p><a href="https://i.stack.imgur.com/ihCe7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ihCe7.jpg" alt="enter image description here"></a></p>
  
  <p>In the second slide, the slide three content is shown in slide two. </p>
  
  <p><a href="https://i.stack.imgur.com/J6fJx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J6fJx.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/u0ZrK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u0ZrK.jpg" alt="enter image description here"></a></p>
  
  <p>4th slide is empty.</p>
  
  <p><a href="https://i.stack.imgur.com/lZqLD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lZqLD.jpg" alt="enter image description here"></a></p>