Каждая точка будет представлена блоком с классом dot, поэтому сразу допишем стили для них. Не забываем об стилях для активной точки, к ней будем добавлять класс active.
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");
}
});
});
Основные нововведения в скрипт находятся в строках 10-29, плюс в обработчики событий на следующий/предыдущий слайды добавлены пару строк, изменяющих активную точку соответственно.
Нужно добавить setInterval(next, 3000); в конце JavaScript(jQuery) кода. 3000 это 3 секунды. Можете поменять по своему усмотрению. Для меня это самый оптимальный интервал.
В этой статье мы расскажем о том, как создать простенький плагин на jQuery, который будет изменять внешний вид слайдера с ползунком, таким образом вы сможете задавать собственное оформление ему.
Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:
Мы обнаружили, что у вас установлено расширение AdBlock или программа Adguard или другое ПО, блокирующее показ рекламы на сайте. Мы прекрасно понимаем Вас, но реклама - единственный способ заработка сайта, его отсутствие мешает развитию. Поэтому хотели бы Вас попросить отключить блокирование рекламы на сайте. Со своей стороны обещаем не добавлять навязчивую рекламу - которая будет перекрывать сайт или открывать новые вкладки. Как отключить блокировку рекламы в adBlock Как отключить блокировку рекламы в Adguard В противном случае это сообщение будет переодически показываться Вам, большое спасибо за понимание.
Комментарии
Как добавить автопереключение слайдов?
RSS лента комментариев этой записи