Здравствуйте. Требуется подсказка JS программистов. Есть самый простой слайдер. Внизу есть кнопки пагинации, но они не работают.
Как прикрутить эти кнопки, чтобы они реагировали на слайдер и переключали его?
Помогите, пожалуйста.
jQuery(document).ready(function(){
//// ---> Проверка на существование элемента на странице
jQuery.fn.exists = function() {
return jQuery(this).length;
}
//// ---> Слайдер
$(function(){
if($('.slider').exists()) {
$('.slider').each(function(){
var slider = $(this);
var slideWrap = slider.find('.slide-wrap'),
nextLink = slider.find('.next-slide'),
prevLink = slider.find('.prev-slide'),
slideWidth = slider.find('.slide-item').outerWidth(),
scrollSlider = slideWrap.position().left - slideWidth;
/* Клик по ссылке на следующий слайд */
nextLink.click(function(){
if(!slideWrap.is(':animated')) {
slideWrap.animate({left: scrollSlider}, 500, function(){
slideWrap
.find('.slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
});
}
});
/* Клик по ссылке на предыдующий слайд */
prevLink.click(function(){
if(!slideWrap.is(':animated')) {
slideWrap
.css({'left': scrollSlider})
.find('.slide-item:last')
.prependTo(slideWrap)
.parent()
.animate({left: 0}, 500);
}
});
});
}
});
});
<div class="slider">
<div class="slide-list">
<div class="slide-wrap">
<div class="slide-item #slide0">
<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-1.jpg">
<span class="slide-title">Первый слайд</span>
</div>
<div class="slide-item">
<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-2.jpg">
<span class="slide-title">второй слайд</span>
</div>
<div class="slide-item">
<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-3.jpg">
<span class="slide-title">Третий слайд</span>
</div>
<div class="slide-item">
<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-4.jpg">
<span class="slide-title">Четвертый слайд</span>
</div>
<div class="slide-item">
<img alt="" src="http://www.howtomake.com.ua/wp-content/uploads/2012/07/img-5.jpg">
<span class="slide-title">Пятый слайд</span>
</div>
</div>
<div class="clear"></div>
</div>
<div class="navy prev-slide" name="prev"></div>
<div class="navy next-slide" name="next"></div>
</div>
*!*<!--НЕ работает!-->
<p class="nav">
<a href="#slide0" id="slide0" class="">1</a>
<a href="#slide1" id="slide1" class="">2</a>
<a href="#slide2" id="slide2" class="">3</a>
</p> */!*
Вот демо работы слайдера(пагинация не работает)
https://jsfiddle.net/ud41ds8m/8/
Помогите, пожалуйста.
