Блог для начинающих веб разработчиков. HTML, СSS, Jquery, Drupal и другое.

→ Делаем простой слайдер на jQuery

Опубликовано: 13 апреля 2012

Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.

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

Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?

  • Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным  и понятным.
  • Возможность вставлять в слайды как изображения, так и любой HTML – код.
  • Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
  • Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.

Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).

ДемоСкачать

Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.

<div id="slider-wrap">
	<div id="slider">
		<div class="slide">Здесь содержание слайда 1</div>
		<div class="slide">Здесь содержание слайда 2</div>
		<div class="slide">Здесь содержание слайда 3</div>
	</div>
</div>

Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.

Далее рассмотрим CSS. Это разметка стилей для нашего jQuery - слайдера. Вставьте код, что приведён ниже в файл стилей (css - файл) вашего сайта или темы.

#slider-wrap{ /* Оболочка слайдера и кнопок */
	width:660px; 
	}
#slider{ /* Оболочка слайдера */
	width:640px;
	height:360px;
	overflow: hidden;
	border:#eee solid 10px;
	position:relative;}
.slide{ /* Слайд */
	width:100%;
	height:100%;
	}
.sli-links{ /* Кнопки смены слайдов */
	margin-top:10px;
	text-align:center;}
.sli-links .control-slide{
	margin:2px;
	display:inline-block;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(radioBg.png) center bottom no-repeat;}
.sli-links .control-slide:hover{
	cursor:pointer;
	background-position:center center;}
.sli-links .control-slide.active{
	background-position:center top;}
#prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */
	display:block;
	width:15px;
	height:100%;
	position:absolute;
	top:0;
	overflow:hidden;
	text-indent:-999px;
	background:url(arrowBg.png) left center no-repeat;
	opacity:0.8;
	z-index:3;
	outline:none !important;}
#prewbutton{left:10px;}
#nextbutton{
	right:10px;
	background:url(arrowBg.png) right center no-repeat;}
#prewbutton:hover, #nextbutton:hover{
	opacity:1;}

Давайте разберём его подробнее. Сначала мы даём основному блоку с идентификатором "slider-wrap", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов ( .slide).

И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.

Селектор .sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида <span class="control-slide">номер</span>, которые вставятся в необходимом количестве автоматически, вместе и с их родителем .sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.

Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.

Давайте теперь рассмотрим сам сценарий:

var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;

$(document).ready(function(e) {
	$('.slide').css(
		{"position" : "absolute",
		 "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
		clearTimeout(slideTime);
		$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
		if(arrow == "next"){
			if(slideNum == (slideCount-1)){slideNum=0;}
			else{slideNum++}
			}
		else if(arrow == "prew")
		{
			if(slideNum == 0){slideNum=slideCount-1;}
			else{slideNum-=1}
		}
		else{
			slideNum = arrow;
			}
		$('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
		$(".control-slide.active").removeClass("active");
		$('.control-slide').eq(slideNum).addClass('active');
		}
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#"></a>')
	.prependTo('#slider');		
	$('#nextbutton').click(function(){
		animSlide("next");

		})
	$('#prewbutton').click(function(){
		animSlide("prew");
		})
}
	var $adderSpan = '';
	$('.slide').each(function(index) {
			$adderSpan += '<span class = "control-slide">' + index + '</span>';
		});
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
	if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
			}
	$('#slider-wrap').hover(	
		function(){clearTimeout(slideTime); pause = true;},
		function(){pause = false; rotator();
		});
	rotator();
});

Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).

Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода .css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все .hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.

Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.

Таки образом эта функция скрывает текущий div, высчитывает новый и показывает его.

Обратите внимание, что методу .fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.

Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода .hover(), мы указываем: очистить таймер если он запущен - clearTimeout(slideTime), и установить pause = true. А после отвода курсора, отключить паузу и запустить замыкание rotator(). 

Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом .slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:

<div class="sli-links">
  <span class="control-slide">0</span>
  <span class="control-slide">1</span>
  <span class="control-slide">2</span>
  <span class="control-slide">3</span>
</div>

Затем если в настройках указано, что ссылки "следующий - предыдущий" нужны, то создадим и их, и сразу повесим на них обработчики. В качестве обработчика клика используем ту же самую функцию animSlide, с аргументами "next" и "prew". 

Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.

В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 5 штук):

<div id="slider-wrap">
  <div id="slider">
    <a id="prewbutton" href="#">&lt;</a>
    <a id="nextbutton" href="#">></a>
    <div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
      <img src="img/001.jpg" width="640" height="360">
    </div>
    <div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
      <img src="img/002.jpg" width="640" height="360">
    </div>
    <div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
      <img src="img/003.jpg" width="640" height="360">
    </div>
    <div class="slide" style="position: absolute; top: 0px; left: 0px; display: block">
      <img src="img/004.jpg" width="640" height="360">
    </div>
  </div>
  <div class="sli-links">
    <span class="control-slide">0</span>
    <span class="control-slide">1</span>
    <span class="control-slide">2</span>
    <span class="control-slide active">3</span>
  </div>
</div>

Ниже вы можете посмотреть, как работает наш jQuery слайдер на демо странице, и скачать все необходимые исходники.

ДемоСкачать

На напоследок, пару моментов об интеграции этого слайдера с Drupal. Вы можете добавить этот код в файл шаблона, например в page.tpl.php, и прикрепить скрипт отдельными js-файлом к теме. Jquery в Drupal включен по умолчанию, но работает в режиме совместимости (подробнее). Есть два варианта доработки. Либо обернуть весь js код:

(function ($) {
  // Весь ваш код...
})(jQuery);

или заменить символы $ во всём скрипте на jQuery. Вот так:

jQuery(document).ready(function(e) {
	jQuery('.slide').css(
		{"position" : "absolute",
		 "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = jQuery("#slider .slide").size();
	var animSlide = function(arrow){
// и т. д.

В примере уже реализован первый метод.

Спасибо за прочтение! Оставляйте комментарии, приходите ещё. А так же вы можете подписаться на RSS, чтобы получать обновления блога первыми! 

Добавлено: Это ещё не всё. Читайте следующую статью о HWSlider. Там мы добавим новые возможности к данному скрипту.

Поделиться:
Комментарии

Отлично!
А как скрипт доработать, чтобы на странице использовать уже не один слайдер а два и более одновременно - это была бы ценная информация для меня точно.

Александр
ср, 2012-05-02 06:19

Спасибо за первый комментарий на этом блоге :).
Для нескольких слайдеров скрипт доработать думаю можно. Скорее всего придётся использовать метод each().
На днях протестирую и обновлю эту статью.

Faraday
ср, 2012-05-02 06:59

Отлично, жду обновления!

Александр
ср, 2012-05-02 08:08

Если вы ещё здесь будете - статья тут http://heavenweb.ru/prostoy-jquery-slayder-chast-2 :)

Faraday
пн, 2012-05-07 20:31

Благодарствую.

Александр
ср, 2012-05-16 05:44

Спасибо за понятное описание и простоту дизайна слайдера.

Simka
пт, 2012-07-20 22:14

Очень рад, что вам эта информация оказалась полезной :)

Faraday
чт, 2012-07-26 23:52

Здравствуйте, а можно сделать чтобы одновременно 2 картинки отображались? Просмотрел все слайдеры - нигде такого не нашел.

Сергей
сб, 2012-08-04 00:44

Сергей, вы можете в div который .slide вставить любой HTML код, например две картинки, главное, чтобы они нормально поместились в слайд.

Faraday
сб, 2012-08-04 21:08

Очередное доказательство того, что всё гениальное - просто. Спасибо за слайдер, слегка доработаю под себя напильником (благо руки не кривые), и будет отлично. Таким и должен быть слайдер: простым и стильным. Жаль, что сейчас тенденция "чем сложнее - тем круче". Мне такой выпендреж ни к чему =)

ср, 2012-08-08 14:58

Amazing blog! Is your theme custom made or did you download it from somewhere?

A design like yours with a few simple tweeks would really make my
blog jump out. Please let me know where you got your design.
Kudos

пт, 2013-08-30 05:00

Спасибо!!! В первый раз вообще сталкиваюсь с этими скриптами, но за 15 минут вставил все это дело на Друпал!

Евгений Таран
вт, 2012-08-14 17:48

подскажите, как сделать так, чтобы он отображался только на главной? У меня на Друпал 7 на всех страницах.

Евгений Таран
вт, 2012-08-14 18:01

Добрый день. Если вы установили слайдер в page.tpl.php, то можете использовать переменную $is_front, которая будет TRUE, если показывается главная страница, например так:

<?php
  if($is_front){
    //  Здесь код выводится только на главной
}
?>

или создайте отдельный файл page--front.tpl.php который применяется только для главной.

Если слайдер выводится в блоке, смотрите настройки блокка > "Только на перечисленных страницах" и установите там <front>

Faraday
пн, 2012-08-20 15:57

Отдельно скрипт работает, а когда в свой код вставляю хрень получается какая-то, нету кнопок прокрутки и вообще на меню почему-то залезает (

Алексей
ср, 2012-09-26 15:10

Возможно, проблемы с CSS?. Покажите URL сайта. Тогда я возможно смогу что-нибудь подсказать.

Faraday
пт, 2012-09-28 12:33

Доброго времени суток. С уважением к вам и с вопросом. Вы опубликовали этот скрипт слайдера в свободном доступе как я понял для всех желающих.
Я не программист обучаться поздно, но есть желание вставить ваш слаедер на первую страницу сайта.
Есть простая просьба. Можете помочь в установке этой красоты на моей страничке?
http://www.foto-sk.ru/mar6.htm
Страничка сделана на HTML -коде. Вот как то надо туда воткнуть все это. Не бесплатно. Напишите мне на почту, обсудим.
С уважением, Владимир С.

Владимир
пн, 2012-11-05 18:21

Отличный слайдер. Приятный, достаточно функциональный и легкий!
Спасибо.

Юрий
пт, 2012-11-23 12:40

Спасибо Вам огромно за ваш труд. Скопировал на свой будущий сайтик. Только почему то кнопки автоматически не проставлялись, пришлось вручную прописать.

Андрей
сб, 2012-12-15 15:19

Истинное спасибо за слайдер. Удачи.

Александр
сб, 2012-12-22 18:16

Здорово! просто и быстро.. Только вот не понял где назойливая реклама на сайте?! Сайт ведь будет нравится людям, смотрите аккуратнее..))

Игорь
вт, 2012-12-25 16:27

Здравствуйте!
Скрипт слайдера сделал отдельным файлом .js и всё перестало работать. Подскажите как сделать правильно?

Евгений
пн, 2012-12-31 07:12

Здравствуйте! А как убрать кнопки снизу слайдера, с помощью которых можно выбирать конкретный слайд?
Заранее спасибо.

Артур
вт, 2013-01-01 14:57

Убери из папки img изображение кнопок radioBg.png

Евгений
чт, 2013-01-03 18:57

Убрать картинки не вариант, как сделать правильней указал на пару комментариев ниже.

Faraday
пт, 2013-01-04 20:56

А как сделать каждый слайд ссылкой ?

Евгений
чт, 2013-01-03 18:59

Например так:

<div class="slide">
	<a href="dcs.html"><img height="350" src="img/001.jpg" width="640" /></a>
</div>
Артур
пт, 2013-01-04 20:33

Верно, можно так, а если же нужен именно текст ссылкой, вместо картинки можно добавить любую вёрстку какую хотите :)

Faraday
пт, 2013-01-04 20:55

Но так он просто уберёт изображения этих кнопок и при наведении на их предполагаемое место указатель мыши меняется. А значит они всё равно остаются. А мне нужно их совсем убрать.

Артур
пт, 2013-01-04 20:32

Уберите часть Java Script кода в которых формируются эти кнопки, а именно:



var $adderSpan = '';
$('.slide').each(function(index) {
	$adderSpan += '<span class = "control-slide">' + index + '</span>';
});
$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
$(".control-slide:first").addClass("active");
$('.control-slide').click(function(){
var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
});

Это находится на 42-52 строчках примера в статье, либо 116-125 строках в файле демо.

Или попробуйте обновленый скрипт слайдера, там я сделал специальные настройки для этого.

Faraday
пт, 2013-01-04 20:53

Спасибо, кнопки убрались.

Артур
сб, 2013-01-05 19:02

Спасибо автор за полезный урок!) Пример очень понравился)

Отличный слайдер!

Творческих успехов!)

Алекс
ср, 2013-01-09 11:48

Хороший, легкий слайдер. Очень понравился.
Спасибо!

Алексей
ср, 2013-01-23 22:09

Отличный слайдер. Очень простой !!!

Спасибо за поделку. Пожалуй подпишусь на блог.

Творческих успехов !!!

сб, 2013-02-02 20:11

Наверное самый логичный, удобный и простой слайдер из всех что я видел. Однозначно огромный плюс! *Beer*

пилот дирижабля
сб, 2013-02-09 02:10

Для чего нужно использовать такое кол-во дивов в основном коде страницы, почему не сделать к примеру как в том же слимбоксе на базе ссылок?

Alex
пт, 2013-02-15 19:50

Здравствуйте очень понравился Ваш слайдер... Подскажите пожалуйста, как его зациклить, если я хочу чтобы он показывал ифнормацию из моей базы данных mysql? Такое возможно вообще? Если у меня например 4 записи будет в БД.
Просто на данный момент, он доходит до 4 картинки и заканчивается...

Помогите пожалуйста.

Сергей
пн, 2013-02-18 19:22

Хороший урок, отлично пишешь. Надеюсь еще что-нибудь прикольное запилишь, а нам потом расскажешь как именно. :)

Михаил
ср, 2013-03-06 14:00

Как избавиться от появления '#' хэша в строке адреса, при переключении слайдов.

Сергей
пт, 2013-03-08 00:44

Нашел

$('.класс дива).click( function(event){

// stop the click on the link adding a # to the end of the
event.preventDefault();

// do other stuff
$('.locations').toggle();

});

Сергей
пт, 2013-03-08 01:40

Огромное спасибо автору! Очень долго пытался найти в Интернете работающий слайдер с использованием классов. БОЛЬШОЕ СПАСИБО!!!

Максим
пт, 2013-03-29 14:46

Спасибо слайдер супер!!!! А можно ли добавить в него кнопку остановить/запустить чтобы соответственно он начинал листать слайды и прекращал!!!??

Серега
чт, 2013-05-16 12:26

Ну в принципе можно, но в скрипте придётся дописать пару функций, для этой кнопки.

Faraday
чт, 2013-09-05 20:56

Здравствуйте!
Поместил Ваш замечательный слайдер в div-блок header, но слайдер в этом блоке прижимается к левому верхнему углу...подскажите, пожалуйста, как сделать чтобы слайдер был бы посередине блока. Заранее спасибо!

Макс
вс, 2013-06-16 19:56

Добрый день. Попробуйте добавить в CSS для #slider-wrap свойство margin:0 auto; Будет выглядеть как-то так:

#slider-wrap{
    width:660px;
    margin:0 auto;
    }

 Это самое начало CSS. Вместо 0 можно подставить значение в пикселях, которое будет отступом сверху и снизу.

Faraday
пн, 2013-06-17 20:13

!!!!!! Faraday, дружище! Все отлично работает....и как я сам не догадался! Как здорово, что на свете есть такие люди, как Вы, которые все просто и понятно (...да и оперативно!) объяснят и поскажут! Спасибо Вам огромное и удачи во всем!!!

Макс
вт, 2013-06-18 17:55

Подскажите, пожалуйста, как по ссылке из меню переходить на конкретный слайд в слайдере? Пробовал в onclick ссылки вызвать animSlide(n), где n-номер конкретного слайда, но почему-то слайд остается прежним.

Артем
чт, 2013-06-20 11:33

Автор молодец, все предельно ясно и понятно, ни чего лишнего, респект!

Алексей
пт, 2013-06-21 16:17

Здравствуйте, Faraday!
А нельзя ли сделать так, чтобы сам слайдер был не прямоугольной формы, а со скругленными углами, по аналогии с "border-radius: число px;" (ссылка на пример: http://htmlbook.ru/faq/kak-sdelat-kruglye-izobrazheniya). Если это сложно ( а я подозреваю, что именно так и есть...), Вы уж так и скажите, чтобы я не тешил себя надеждами )).....
Заранее благодарю за ответ...

Макс
вс, 2013-06-30 23:52

Ну теоретически вы можете задать тот же border-radius для всех изображений в слайдах, например добавив свойства (это если в слайдах именно изображения)





.slide img{
     display:block;
     border-radius:5px;
}

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

Faraday
чт, 2013-09-05 21:01

Страницы

Комментировать