customizing lightSlider slide

Question

I am using the light slider jquery plugin to slide the html content. However the plugin works but some slides are mis aligned.

Here is the jsfiddle. regarding this issue.

Here is my html:

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.

<div class="demo">
    <ul id="light-slider">
        <li>
            <h3>1</h3>
            <p>Hello</p>
            <p>Hello, what the hell ?</p>
            <p>Hello, lets put his long terxt.....so long and, so long</p>
            <p>Hello</p>

        </li>
        <li>
            <h3>First Slide</h3>
            <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
            <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
            <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
        </li>
        <li>
            <h3>Second Slide</h3>
            <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
            <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
            <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
        </li>
        <li>
            <h3>Third Slide</h3>
            <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
            <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
            <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
        </li>

    </ul>
</div>

CSS:

  $(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) {}
      });
  });

Output: The slide 1 text doesnt fit to screen, it goes off the screen.

In the second slide, the slide three content is shown in slide two.

4th slide is empty.

Answer 1

It seems to be miscalculating the autoWidth, or when you set it, it goes beyond the width of the slide wrapper so if you change that to false, everything aligns correctly.

$(document).ready(function() {
      $("#light-slider").lightSlider({
          item: 1,
          autoWidth: false,
          slideMove: 1, // slidemove will be 1 if loop is true
          slideMargin: 40,
          ...

See updated fiddle: https://jsfiddle.net/2patspw2/2757/