Я хочу добавить слайдер
responsiveslides.com к сайту. В данном слайдере есть возможность поменять навигацию, которая по умолчанию состоит из маркированного списка, при помощи тега navContainer: "" , что я собственно и хочу сделать. Но контейнер, который я привязываю, игнорируется и переключение всё так же происходит при помощи маркированного списка. Что я делаю не так?
<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>