slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 11093
Теги: навигация, слайдер, 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, плюс в обработчики событий на следующий/предыдущий слайды добавлены пару строк, изменяющих активную точку соответственно.

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

demo

Скачать исходники:

download

Комментарии   

+2 # Даша Варникова 31.03.2016 11:37
Спасибо, хороший слайдер, жалко только автоперелистывания нет)
Ответить | Ответить с цитатой | Цитировать
0 # Бахром 08.03.2018 20:45
Нужно добавить setInterval(next, 3000); в конце JavaScript(jQuery) кода. 3000 это 3 секунды. Можете поменять по своему усмотрению. Для меня это самый оптимальный интервал.
Ответить | Ответить с цитатой | Цитировать
+1 # Elena 18.08.2016 12:22
Благодарю за скрипт!
Как добавить автопереключение слайдов?
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Навигация по странице при помощи якорей

В HTML-языке есть специальные ссылки, которые позволяют создать удобную навигацию по странице, если она длинная. Именно об этом я вам и расскажу.

Теги:

html, href, navigation, навигация

Комментариев: 0 Подробнее
Простой слайдер-карусель контента/изображений на CSS + jQuery

В этой статье мы своими руками сделаем простой и адаптивный слайдер с кнопками перелистывания на чистом CSS с использованием нескольких строк jQuery.

Теги:

css, jQuery, slider, слайдер

Комментариев: 0 Подробнее
Простой скрипт слайдера-ползунка для изменения внешнего вида.

В этой статье мы расскажем о том, как создать простенький плагин на jQuery, который будет изменять внешний вид слайдера с ползунком, таким образом вы сможете задавать собственное оформление ему.

Теги:

javascript, jQuery, slider, слайдер, ползунок

Комментариев: 0 Подробнее

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.