Actually, the question. I need two sliders with different settings. How to do it? The first one I have has this html code:

<ul class="bxslider"> <li>

and js:

 function bxslider() { $('.bxslider').bxSlider({ infiniteLoop: false }); }

    2 answers 2

    You did not show the second slider html, but suppose you have it like this:

     <ul class="bxslider slider2"> <li>

    Then to initialize the second slider, you need this js code:

     $('.bxslider.slider2').bxSlider({ infiniteLoop: false });

    Unfortunately, I don’t know what this function is and at what point it works: function bxslider() , but in most cases the sliders are initialized in the same way, and when you load the page, both sliders will start:

     $(document).ready(function() { $('.bxslider.slider1').bxSlider({ infiniteLoop: false }); $('.bxslider.slider2').bxSlider({ infiniteLoop: false }); });

    • No thanks to the second code) It was more accurate, but I deleted it Well, and how to roll styles for another? Shared bxslider file - Nikita Shchypylov
    • @ Nikita Schipilov, corrected a little answer. Slider customization can be of two types. The first is at the level of github.com/stevenwanderski/bxslider-4 library capabilities at the time of initialization. Second, at the css level, you have classes to which you can hang your measurements - dluhhbiu
    • Oh, here I have Sass come in handy with its nesting. Thanks for the reply - Nikita Shchypylov

    Two sliders:

     <ul class="bxslider-1"> ... <ul> <ul class="bxslider-2"> ... <ul>

    Two appeals to each:

     function bxslider() { $('.bxslider-1').bxSlider({ infiniteLoop: false }); } function bxslider() { $('.bxslider-2').bxSlider({ infiniteLoop: true }); }

    I mean, let's give your slider in any html any class and refer to these classes to initialize and give different settings via API

    • Understood, thanks for the help - Nikita Shchypylov