Question

我使用轻滑块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文本不适合屏幕，它会离开屏幕。

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

第4张幻灯片是空的。

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,
          ...

请参阅更新的小提琴：https://jsfiddle.net/2patspw2/2757/

自定义lightSlider幻灯片

1 个答案: