Здравствуйте!
Подскажите пожалуйста, как же мне настроить скрипт, чтобы он работал для двух слайдеров?
https://jsfiddle.net/1fkdj5y3/28/
Разметка планируется идентичная
<div class="slider">
<div class="next"></div>
<div class="prev"></div>
<div class="slides">
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-left.jpg" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-right.jpg" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-left.jpg"/>
</div>
</div>
<div class="navigation"></div>
</div>
стили немного изменю потом для второго
body {
margin:0;
text-align:center;
}
body .slider {
overflow:hidden; /* Скрываем всё что за блоком слайдера */
position:relative;
width:800px;
height:500px;
margin:0 auto;
}
body .slider .slides {
position:relative;
transition:1s; /* Задаем время изменения блока, отвечает за плавную прокрутку */
}
body .slider .slides .slide {
float:left;
display:block;
}
body .slider .slides .slide img{
width:800px;
height:500px;
}
body .slider .next {
position:absolute;
height:50px;
width:50px;
background:#009900;
right:0;
top:225px;
z-index:1;
cursor:pointer;
}
body .slider .prev {
position:absolute;
height:50px;
width:50px;
background:#009900;
left:0;
top:225px;
z-index:1;
cursor:pointer;
}
body .slider .navigation {
position:absolute;
width:100%;
bottom:40px;
left:0;
z-index:1;
cursor:pointer;
}
body .slider .navigation .dot {
display:inline-block;
width:16px;
height:16px;
background:#666666;
cursor:pointer;
border-radius:16px;
margin:0 20px;
border:1px solid #666666;
}
body .slider .navigation .active {
background:#fff;
}
вот сам скрипт
$(document).ready(function() { // Ждём загрузки страницы
var slides = $(".slider .slides").children(".slide"); // Получаем массив всех слайдов
var width = $(".slider .slides").width(); // Получаем ширину видимой области
var i = slides.length; // Получаем количество слайдов
var offset = i * width; // Задаем начальное смещение и ширину всех слайдов
var cheki = i-1;
$(".slider .slides").css('width',offset); // Задаем блоку со слайдами ширину всех слайдов
for (j=0; j < slides.length; j++) {
if (j==0) {
$(".slider .navigation").append("<div class='dot active'></div>");
}
else {
$(".slider .navigation").append("<div class='dot'></div>");
}
}
var dots = $(".slider .navigation").children(".dot");
offset = 0; // Обнуляем смещение, так как показывается начала 1 слайд
i = 0; // Обнуляем номер текущего слайда
$('.slider .navigation .dot').click(function(){
$(".slider .navigation .active").removeClass("active");
$(this).addClass("active");
i = $(this).index();
offset = i * width;
$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
});
$("body .slider .next").click(function(){ // Событие клика на кнопку "следующий слайд"
if (offset < width * cheki) { // Проверяем, дошли ли мы до конца
offset += width; // Увеличиваем смещение до следующего слайда
$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
$(".slider .navigation .active").removeClass("active");
$(dots[++i]).addClass("active");
}
});
$("body .slider .prev").click(function(){ // Событие клика на кнопку "предыдущий слайд"
if (offset > 0) { // Проверяем, дошли ли мы до конца
offset -= width; // Уменьшаем смещение до предыдущегоо слайда
$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к предыдущему
$(".slider .navigation .active").removeClass("active");
$(dots[--i]).addClass("active");
}
});
});
Заранее спасибо большое!!!
