html - 自定义 lightSlider 幻灯片

Question

我正在使用 light slider jquery 插件来滑动 html 内容。然而，该插件可以工作，但有些幻灯片未对齐。

这是 jsfiddle.关于这个问题。

这是我的 html:

这里的 4 个列表项应该显示为 4 个幻灯片，但它们不是。只有第一张和第二张幻灯片显示正确。不知何故，两个和三个错位了。

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

输出:幻灯片 1 的文本不适合屏幕，它从屏幕上消失了。

在第二张幻灯片中，第三张幻灯片的内容显示在第二张幻灯片中。

第四张幻灯片是空的。

Answer 1

它似乎错误地计算了 autoWidth，或者当您设置它时，它超出了幻灯片包装的宽度，所以如果您将其更改为 false，一切都会对齐正确。

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

查看更新的 fiddle :https://jsfiddle.net/2patspw2/2757/