customizing lightSlider Folie

Ich bin mit dem Licht slider jquery plugin schieben Sie den html-Inhalt. Aber das plugin funktioniert, aber einige Folien sind mis ausgerichtet.

Hier ist die jsfiddle. zu diesem Thema.

Hier ist mein html:

Hier die 4 Elemente der Liste dargestellt werden sollen, 4 Folien, aber Sie sind nicht. Nur die ersten und zweiten Folien korrekt angezeigt werden. Irgendwie zwei und drei sind mis ausgerichtet.

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

Ausgabe:
Die Folie 1 text passt nicht zum Bildschirm, es geht aus dem Bildschirm.

In der zweiten Folie, die Folie drei-Inhalt wird angezeigt, in Folie zwei.

4. schieben Sie leer ist.

InformationsquelleAutor Teja Nandamuri | 2016-02-24