I want to add a slider http://responsiveslides.com/ to the site. In this slider it is possible to change the navigation, which by default consists of a bulleted list, using the tag NavContainer: "", which I actually want to do. But the container that I bind is ignored and the switch still happens using a bulleted list. What am I doing wrong?

<meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="../responsiveslides.css"> <link rel="stylesheet" href="demo.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="../responsiveslides.min.js"></script> <script> $(function () { // Slideshow 2 $(".rslides").responsiveSlides({ auto: false, pager: true, speed: 300, maxwidth: 540, navContainer: ".slider-buttons" }); }); </script> </head> <body> <!-- Slideshow 2 --> <ul class="rslides""> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> </ul> <div class="slider-buttons"> <div class="slider-button1"><a href="#" class="slider-button1">Кнопка 1</a></div> <div class="slider-button2"><a href="#" class="slider-button2">Кнопка 2</a></div> <div class="slider-button3"><a href="#" class="slider-button3">Кнопка 3</a></div> </div>

    1 answer 1

    If you look at the parameter list:

    "navContainer": "", // Selector: Where auto generated controls should be appended to, default is after the <ul>

    As you can see, navContainer is a container to which the generated navigation will be added . Those. Navigation will always be generated by a script, and the only thing you can choose is the container where it will be added. The ability to add your own navigation instead of the default one is absent.

    And this is from JS:

     if (options.navContainer) { $(settings.navContainer).append($pager); } else { $this.after($pager); }

    If navContainer set, then navigation is added to it, and if not, by default.