Простой слайдер-карусель с точками(dots) на jQuery

5 / 5

Автор: Администратор

31.08.2015

Теги: навигация, слайдер, dots

В этой статье мы расскажем о том, как сделать самый простой слайдер с навигацией в виде точек.

Использовать будем результаты другой нашей статьи Простой слайдер-карусель с перелистыванием. В итоге мы получим полноценный слайдер с разными элементами навигации.

В HTML разметку добавим блок, в котором будет в будущем находится наша кнопочная навигация с классом navigation:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Демо-страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/js/slider.js"></script>
</head>
<body>
	<div class="slider">
		<div class="next"></div>
		<div class="prev"></div>
		<div class="slides">
			<div class="slide">
				<img src="/images/image1.jpg" />
			</div>
			<div class="slide">
				<img src="/images/image2.jpg" />
			</div>
			<div class="slide">
				<img src="/images/image3.jpg" />
			</div>
		</div>
		<div class="navigation">
		</div>
	</div>
</body>
</html>

Каждая точка будет представлена блоком с классом 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, плюс в обработчики событий на следующий/предыдущий слайды добавлены пару строк, изменяющих активную точку соответственно.

Смотреть Демо-пример работы такого слайдера: