We have answer of your question!

100% solved queries, no empty question

Question: unable to initailize multiple lightslider instances


0

Advertisement


I would like to have multiple instances of lightslider lightslider

but only seem to be able to initialize one instance, the 2nd instance doesn't work correctly. I found a jquery each loop on the lightslider github that I have implemented but can't quite get it to work.

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>   
Question author Tom-harrison | Source

Answer


1


Advertisement


Try this, but I don't understand why you need ids.

$('.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>
Answer author Ivan-karaman

Advertisement


Tickanswer.com is providing the only single recommended solution of the question unable to initailize multiple lightslider instances under the categories i.e jquery , . Our team of experts filter the best solution for you.

Related Search Queries:

You may also add your answer!