Уже несколько раз меня просили рассказать, как сделать слайдер на JS, а я все не рассказывал. Главная причина — потому что не знал, как.

В какой-то момент я понял, что слайдер иногда проще написать, чем искать готовый. Поэтому хочу предложить вам урок по созданию такого слайдера. Его легко сделать своими руками, а код занимает меньше 2 Кб.

Рабочий пример можно увидеть здесь.

Задача

Создать слайдер изображений. Размеры роли не играют, только изображения должны быть одинакового размера. Перед подключением скрипта не забудьте подключить jQuery:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

Создание слайдера

Для управления слайдером будет использоваться меню с белыми кружками, активная закладка будет зеленой. Меню создается динамически. Задача вебмастера — создать список из изображений и присвоить правильные классы. На странице можно располагать любое количество слайдеров, работе друг друга они не мешают.

Код слайдера будет таким:

<div class="slider">
	<ul>
		<li><img src="i/1.jpg" alt=""></li>
		<li><img src="i/2.jpg" alt=""></li>
		<li><img src="i/3.jpg" alt=""></li>
		<li><img src="i/4.jpg" alt=""></li>
		<li><img src="i/5.jpg" alt=""></li>
	</ul>
</div>

Для управления слайдером нужен такой код:

<script type="text/javascript">
$(document).ready(function() {
 $(".slider").each(function () { // обрабатываем каждый слайдер
  var obj = $(this);
  $(obj).append("<div class='nav'></div>");
  $(obj).find("li").each(function () {
   $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
   $(this).addClass("slider"+$(this).index());
  });
  $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
 });
});
function sliderJS (obj, sl) { // slider function
 var ul = $(sl).find("ul"); // находим блок
 var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
 var step = $(bl).width(); // ширина объекта
 $(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки
}
$(document).on("click", ".slider .nav span", function() { // slider click navigate
 var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
 $(sl).find("span").removeClass("on"); // убираем активный элемент
 $(this).addClass("on"); // делаем активным текущий
 var obj = $(this).attr("rel"); // узнаем его номер
 sliderJS(obj, sl); // слайдим
 return false;
});
</script>

А стили для слайдера нужны такие:

<style type="text/css">
 .slider {
 z-index: 9;
 width: 700px;
 height: 290px;
 overflow: hidden;
 margin: 0 0 7px;
 position: relative;
 }
 .slider ul,
 .slider li {
 padding: 0;
 margin: 0;
 list-style-type: none;
 }
 .slider ul {
 width: 9999px; 
 }
 .slider ul li {
 list-style-type: none;
 float: left;
 width: 700px;
 height: 290px;
 }
 .slider .nav {
 position: absolute;
 left: 15px;
 bottom: 12px; 
 }
 .slider .nav span {
 opacity: 0.9;
 background: #fff;
 margin: 0 8px 0 0;
 width: 16px;
 height: 16px;
 border-radius: 8px;
 cursor: pointer;
 overflow: hidden;
 display: block;
 float: left;
 box-shadow: 0 1px 2px #000;
 }
 .slider .nav span.on {
 background: #2e9419;
 }
</style>

Как видите, код предельно прост. Я специально не делал разные стили переходов, а остановился именно на простом перематывании слайдов. Кроме того, автоматически слайды меняться не будут. Не знаю, кого как, но меня раздражает любая анимация на странице, которая производится без моего ведома.

По умолчанию размер блока 700 х 290 пикселей, его можно менять как угодно. Не забудьте также обновить CSS после изменения размеров картинок.

Демо и скачать

Нужна версия с автоматической прокруткой?

↑ Тисни «Лайк», щоб читати нас у Фейсбуці

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Коменти
Vazgen

Напишите плиз функцию чтобы слайдер листал фото

Илья

Если вы уже оборачиваете $(selector) в переменную, то не нужно эту переменную опять заворчивать в $(variable), создавая новый объект. Это неправильно и нерационально.

QWERTY

Слайдер отличный, только не ресайзится от размеров картинок, как решить эту задачу?

егор

Как вставить данный слайдер на статический html сайт??

NUR

Здравствуйте! У Вас в демо версии, кнопки переключателей на прозрачном фоне. У меня они получаются на сером фоне. Длинный прямоугольник внизу слайдера получается. Подскажите пожалуйста, как от этого избавиться?

St1Ff

@NUR,
это блок управления, в сss он имеет название .nav, похоже, что у вас уже есть .nav, в таком случае стиль накладывается а слайдер. Проверьте наличии второго .nav если найдете – самый простой способ поменять атрибут для слайдера.

Я

А где сам урок-то????
Куда пропал?
Кто может-дайте ссылочку!!!
Пожалуйста

Назар Токарь

@Я, нажмите “вернуться к статье”.

Henry

Нашел отличный урок по созданию слайдера без знания языка программирования…

Назар Токарь

@Henry, нет, не отличный. Я этот тупак даже публиковать не буду.

Григорий

Помогите пожалуйста! Баннер отображается только на главной странице. Для каждой страницы написан отдельный html файл. Шапка одинаковая.

Назар Токарь

@Григорий, какой баннер, вы о чем?

Григорий

Добрый вечер, у меня не листаются слайды. Уже здесь $(ul).animate({marginLeft: “-“+step*obj}, 500); // 500 это скорость перемотки
} ставил разные значения. Стоит как вкопанный. Помогите пожалуста

Анастасия

@Григорий, библиотеку jquery ui подключили?

Григорий

Добрый день! Скажите, как можно сдвинуть с места слайды? У меня они не перелистываются, какие бы я значения не ставил!

Виталик

Приветствую! Подскажите, как можно поменять сам эффект перехода здесь? Не хочу ставить другой, а клиенту хочется эффект мозаики. Спасибо!

денис

доброго времени суток. такое дело. на моем сайте http://moy-recepty.ucoz.ru/ справа есть блок : “лучшие интернет магазины”, в данном блоке ТРИ подкатегории : “1,2,3”, которые переключаються кликом мышки. Можно ли прописать код данного блока так, чтобы эти ТРИ подкатегори менялись автоматически каждые 15 секунд (“1”-15 сек.-“2″-15сек.”3”-15сек.-“1”-15сек. и т.д.по принципу слайдера). буду благодарен за ответ. для полной ясности происходящего могу выслать полностью код данного моего блока, чтобы было более наглядно понятно.

Назар Токарь

Можно, напишите функцию, которая будет нажимать на ссылку после той, которая активна, каждые несколько секунд.

денис

@Назар Токарь, Вы не поможете мне с этим кодом ? Вот этот рекламный блок:

nikola

Доброго времени. Отличный туториал. Пытаюсь подкорректировать для возможности вывести вместо кноок навигации превьюшки изображений (thumbs). Но чего-то никак не получается. Не поделитесь опытом?

xsi

Огромное спасибо за слайдер! Среди найденных на просторах тырнета этот наверно один из лучших по простоте и юзабельности.

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

Назар Токарь

@xsi, может, разные размеры изображений или стили страницы перекрывают стили слайдера? Попробуйте посмотреть в инспекторе кода, куда деваются слайды

xsi

@Назар Токарь, в том-то и дело что я взял одну и ту же тестовую картинку “правильного” размера… специально сделал несколько слайдеров и у всех в одном и том же месте перестает работать вывод. как будто ширина браузера ограничена и не даёт колбасу из фоток делать больше 10000px….

Назар Токарь

@xsi, про тестовую картинку я понял, а стили сайта могут перекрывать стили слайдера.

xsi

@xsi, вот! )))

.slider ul {
width: 9999px;
}

меняю на 999999px и все ок ))
спасибо))

Назар Токарь

@xsi, значит, у вас слишком много картинок.

Виталий

Добрый вечер. Слайдер отличный, благодарю. Я вставил второй слайдер для видеоотзывов, но на нём не отображается меню переключения слайдов. Не подскажите почему?

Илья

Подскажите пожалуйста, какой код должен быть для кнопок ‘left’ и ‘prev’?

StereoTeep

Добрый день, подскажите как сделать прокрутку снизу вверх?

Avtandil

В режиме прокрутки слайдов автоматом при размещении на странице двух слайдеров с разным количеством слайдов происходит котовасия, можно-ли как нибудь это подправить?

Назар Токарь

@Avtandil, где вы нашли автоматическую прокрутку слайдов, если я её не делал?

Avtandil

@Назар Токарь, Внизу, в коментах, коммент от 4 августа 2014, 09:52

Назар Токарь

@Avtandil, ок, спросите у автора кода, это не мой код.

Сергей

В данный слайдер подключил второй библиотеку JQM:

А теперь не получается вставить код для работы слайдера на сенсорных устройствах. Вот код:

$(document).ready(function() {
 $("#myCarousel").swiperight(function() {
 $("#myCarousel").carousel('prev');
 });
 $("#myCarousel").swipeleft(function() {
 $("#myCarousel").carousel('next');
 });
 }); 

Подскажи пж что нужно поменять и куда вставить чтоб данный слайдер заработал на планшете?
За ранее спасибо добрым людям.

Эдуард Фурман

Подскажи, некорректно работает на сайте – что изменить?
тсц-феерия.рф

Максим Саенко

@Эдуард Фурман, у Вас в css файле, похоже, или для ul или для li стоит margin.
напишите примерно такое:

.slider ul > li {
margin:0!important;
padding:0!important;
}

Эдуард Фурман

@Максим Саенко, спасибо, там ошибка была только в Padding нужно было вставить:0!important и тогда корректно отображается.
Если ставить еще и в Margin, то один и тот же файл остается. То есть оставил там только: 0.

Максим Саенко

@Эдуард Фурман, Ну… не видя кода точно не скажешь что именно править нужно… я навскидку сказал… что-то одно подправили — заработало!

kor

Как сделать чтобы слайдер был по центру

Сергій

// var step = $(bl).width();
var step = 670; // якщо ширина різна то ширину вказати ручками