无法初始化多个lightslider实例

Question

我想拥有lightslider lightslider

的多个实例

但似乎只能初始化一个实例，第二个实例无法正常工作。我在lightslider github上找到了一个jquery，我已经实现了但是无法让它工作。

slider.html

 <div class="slider-item">
                <ul id="adaptive" class="content-slider">
                    <li>
                        <h3>1</h3>
                    </li>
                    <li>
                        <h3>2</h3>
                    </li>
                    <li>
                        <h3>3</h3>
                    </li>
                    <li>
                        <h3>4</h3>
                    </li>
                    <li>
                        <h3>5</h3>
                    </li>
                    <li>
                        <h3>6</h3>
                    </li>
                </ul>
            </div>

    <div class="slider-item">
                <ul id="adaptive" class="content-slider">
                    <li>
                        <h3>1</h3>
                    </li>
                    <li>
                        <h3>2</h3>
                    </li>
                    <li>
                        <h3>3</h3>
                    </li>
                    <li>
                        <h3>4</h3>
                    </li>
                    <li>
                        <h3>5</h3>
                    </li>
                    <li>
                        <h3>6</h3>
                    </li>
                </ul>
            </div>

<script>
function activateSliders(){

$('.adaptive').each(function(){

   var sliderId =  $(this).attr('id');

   $("#" + sliderId).lightSlider({
    adaptiveHeight:false,
    item:1,
    slideMargin:0,
    loop:true,
    pager:false
   });

});
}
</script>   

Answer 1

试试这个，但我不明白为什么你需要id s。

$('.content-slider').each(function(i, e){
  var id = 'adaptive';
  $(e).attr('id', id+i);
  var selector = '#'+id+i;
   $(selector).lightSlider({
    adaptiveHeight:false,
    item:1,
    slideMargin:0,
    loop:true,
    pager:false
   });
});

.content-slider{
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
}
.slider-item{margin-top: 50px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

 <div class="slider-item">
                <ul class="content-slider">
                    <li>
                        <h3>1</h3>
                    </li>
                    <li>
                        <h3>2</h3>
                    </li>
                    <li>
                        <h3>3</h3>
                    </li>
                    <li>
                        <h3>4</h3>
                    </li>
                    <li>
                        <h3>5</h3>
                    </li>
                    <li>
                        <h3>6</h3>
                    </li>
                </ul>
            </div>

    <div class="slider-item">
                <ul class="content-slider">
                    <li>
                        <h3>1</h3>
                    </li>
                    <li>
                        <h3>2</h3>
                    </li>
                    <li>
                        <h3>3</h3>
                    </li>
                    <li>
                        <h3>4</h3>
                    </li>
                    <li>
                        <h3>5</h3>
                    </li>
                    <li>
                        <h3>6</h3>
                    </li>
                </ul>
            </div>