CODEWITHSUNDEEP
javascriptjquerycss
yyyyy
yyyyy

Reputation: 11

jquery light slider doesn't work

I'm using a lightSlider and I want to use another one on the same page but in other place. I use this slider form here http://sachinchoolur.github.io/lightslider/ I wrote the code below for the second lightSlider:

HTML:

<ul id="#lightSlider2">
   <li>
      <h5>NatGeo Live Student Mattenes</h5>
      <img src="images/Layer-10.png" alt="">
   </li>
   <li>
      <h5>NatGeo Live Student Mattenes</h5>
      <img src="images/Layer-10.png" alt="">
   </li>
   <li>
      <h5>NatGeo Live Student Mattenes</h5>
      <img src="images/Layer-10.png" alt="">
   </li>
   <li>
      <h5>NatGeo Live Student Mattenes</h5>
      <img src="images/Layer-10.png" alt="">
   </li>
</ul>

JS:

var slider2 = $("#lightSlider2").lightSlider({
    item: 2,
    autoWidth: false,
    slideMove: 1, // slidemove will be 1 if loop is true
    slideMargin: 10,
    cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
    easing: 'linear',
    speed: 1000, //ms'
    pause: 4000,
    auto: true,
    loop: true,
    pauseOnHover: true,
    controls: false,
    pager: false,
    enableDrag: false

});

and CSS is from the lightSlider css file. But second slider doesn't work.

Upvotes: 0

Views: 3000

Answers (1)

Nikhil Ghuse
Nikhil Ghuse

Reputation: 1288

$(document).ready(function() {
    $("#lightSlider ,#lightSlider2 ").lightSlider({
        item: 3,
        autoWidth: false,
        slideMove: 1, // slidemove will be 1 if loop is true
        slideMargin: 10,
 
        addClass: '',
        mode: "slide",
        useCSS: true,
        cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
        easing: 'linear', //'for jquery animation',////
 
        speed: 400, //ms'
        auto: false,
        loop: false,
        slideEndAnimation: true,
        pause: 2000,
 
        keyPress: false,
        controls: true,
        prevHtml: '',
        nextHtml: '',
 
        rtl:false,
        adaptiveHeight:false,
 
        vertical:false,
        verticalHeight:500,
        vThumbWidth:100,
 
        thumbItem:10,
        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) {}
    });
  
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/css/lightslider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/js/lightslider.min.js"></script>
<ul id="lightSlider">
  <li>
    <h3>First Slide</h3>
    <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
  </li>
  <li>
    <h3>Second Slide</h3>
    <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  <li>
    <h3>third Slide</h3>
    <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  <li>
    <h3>forth Slide</h3>
    <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
</ul>

<ul id="lightSlider2">
  <li>
    <h3>First Slide</h3>
    <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
  </li>
  <li>
    <h3>Second Slide</h3>
    <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  <li>
    <h3>third Slide</h3>
    <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  <li>
    <h3>forth Slide</h3>
    <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
</ul>

Upvotes: 1

Related Questions