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

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

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

Задача

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

<script type="text/javascript" src="http://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. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
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; // якщо ширина різна то ширину вказати ручками

Даша

Огромное спасибо!
Отличный слайдер!

Diman

все круто. но как завязать в адаптивный? т.е. 700px поменять на проценты – пробую, ничего не получается. заранее спс.

Назар Токарь

@Diman, ds max-width пробовали использовать?

Diman

@Назар Токарь, нет. поясните подробнее, если это возможно

Diman

@Diman, пробывал max-width – ничего не получилось. Дайте развернутый ответ пожалуйста (с кодом). Считаю, в современных условиях, вопрос более чем актуальный – другими словами – если б ваш слайдер корректно работал на всех устройствах, цены б ему не было. Заранее спасибо.

Назар Токарь

@Diman, в смысле?

Diman

@Diman, в смысле чтоб не к пикселям привязан был, а к процентам

Александр

Спасибо за слайдер. А подскажите пожалуйста как добавить эффект fade?

Pavel

Спасибо! все супер!
Подскажите, как повесить на слайд текст из ALT.
Примерно, в центр. Спасибо!

Назар Токарь

@Pavel, дублируйте title в alt.

Pavel

@Назар Токарь,
Наверное, не верно выразился.
Хочу, чтоб текст из ALT выводился на слайд вместе с изображением, поверх его, в качестве текста прямо на слайде.
Спасибо!

Кирилл

а как можно повесить на картинку кнопку, допустим “Заказать”. На каждую картинку свою кнопку для своего товара

Кирилл

@Кирилл, и еще нужно два слайдера таких на одну страницу. Но вот когда вешаю два слайдера – они глючат

Назар Токарь

@Кирилл, и?

Кирилл

@Назар Токарь, грубо говоря на каждой картинке слайда нужна кнопка, нажимая на которую всплывает форма, куда человек вбивает свои данные. Форма есть, все есть, только я не знаю как прописать кнопку, чтобы отображалась на каждом слайде

Назар Токарь

@Кирилл, ого, ну я тоже не знаю.

Назар Токарь

@Кирилл, об этом написано в инструкции.

Александр

@Кирилл, повесить можно так:
в стилях добавляешь вот это
.slider a {
padding: 10px;
background-color: red;
position: relative;
top: -280px;
left: 5px;
border-radius: 5px;
}
и в сам слайдер после картинки вставляешь
BIG RED BUTTON

Андрей

Предположим у нас есть две кнопки с классом .prev и .next, как сделать чтобы при нажатии на одну из них, происходило переключение слайдов? Спасибо.

Константин

на дэмо все нормально, а когда запускаю загруженный файл, то в нем вместо русских букв пишутся “иероглифы” “Простой слайдер изображений РЅР°” как это исправить? спасибо большое

Александр

@Константин, надо прописать в хеде мета чарсет utf-8, чтобы он понимал русский язык

Alex

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

Назар Токарь

@Alex, так вы же добавили крутилку, я понятия не имею, что вы дописывали, поэтмоу вопрос к вам :)

Alex

@Назар Токарь, window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},10000);
вот код крутилки) взял из сообщений ниже. Как добавить рандом понятия не имею)

Михаил

… ну и “крутилку” вашу добавил:
window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},15000);
Только 5000 на 15000 заменил – не люблю, когда суета…

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

@Михаил, Скажите, а куда вот эту “крутилку” прописывать!? В какой строке!??? Куда, короче! :)))
Спасибо заранее!

Михаил

5 баллов! На любую CMS – без геморроя. Легко, Красиво. Ещё и бесплатно. Офонареть. Я на Битрикс повесил – без проблем. Правда, ссылку сделал не на внешний источник, а на скачанный к себе на сайт: jquery-1.11.1.js
В моем случае выглядит так:
<head> <script language="javascript" src="/bitrix/templates/web20/js/jquery-1.11.1.js"></script> <?$APPLICATION->ShowHead()?> <title><?$APPLICATION->ShowTitle()?></title> </head>
Уважуха!

Назар Токарь

@Михаил, рад что понравилось. jQuery можно ставить откуда угодно. В архиве я его оставляю для тестов.

Андрей

Спасибо! То что нужно кратко и функционально.

Теперь по выходным буду читать сайт

Дмитрий

Спасибо, помогло!

Таня

Интересный слайдер.
Подскажите, как его настроить, чтобы отображался на 100% ширины страницы ?
Простая замена {width:700px;} на {width:100%;} полностью нарушает работу слайдера.

Юлия

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

Назар Токарь

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

Юлия

@Назар Токарь, Добрый вечер, спасибо что ответили, создаю, обзываю .slider2 и .nav2 и не выходит, я его бедьненького уже второй день мурыжу и так и эдак

Сергей

Огромное спасибо!
3 часа рыскал по инету в поисках рабочего кода (плагины мне не подходили, так как сайт сделан на конструкторе LPGenerator). Ваш – первый, который заработал!

Евгений

Автопрокрутка слайдов:
Перед функцией

$(document).on("click", ".slider .nav span", function() // slider click navigate

допишите:
window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},5000);

Алексей

@Евгений, спасибо Вам, как раз искал решение!

Ксения

@Алексей, Спасибо, без авто переключения слайд полумёртвый. Почему автор не включил странно. Но сам слайд хорош своей простотой за что респект

Назар Токарь

@Ксения, я объяснил в посте, почему.

Евгений

Доброго времени суток
Использую CMS Simpla 2.2.1
Не могу понять куда эти строки вписывать
если вписываю в файл шаблона page.tlp то картинки либо не появляются, либо одна под другой находятся
помогите пожалуйста что не так делаю

veko

а как дабавить Ссылку “Следующий” и “Педыдущий”?

Назар Токарь

@veko, такого я в этом скрипте не делал

Unowen

Не разбираюсь в jQuery, но тут вроде как все просто. Только одно не понятно – почему он не отображает элементы, идущие после девятого (чей индекс rel становится двузначным)?
Судя по всему, проблема в этой строчке:
var obj = $(this).attr(“rel”);
Так как тут все правильно создает в браузере:
$(obj).find(“.nav”).append(“”);
Знал бы jQuery получше, может бы сам нашел ответ. Думаю, не мне одному будет интересно.

Unowen

Все оказалось очень просто)
изначально указан width: .slider ul {width: 9999px; }
Значение тут вместо 9999 должно быть равно суммарной ширине всех Ваших изображений, т.е. если у вас 100 изображений по 1024 пикселя, то должно быть так
.slider ul {width: 102400px; }

veko

спасибо, мне нужен был именно не движущий слайдер, полько у меня 25 картинок не показивает выше 14. кружочек 25 а выше 14 показивает белый фон.

Rina

Спасибо ,слайдер супер.Все легко установила и подстроила размер и фото.Но единственная проблемка это он не меняет фото сам ,надо нажимать на кружок.Это можно исправить добавить функции .
Вообщем спасибки.))

Назар Токарь

@Rina, а он и не должен менять их сам :)

Анастасия

как наложить слайдер на картинку и поменять его координаты

Назар Токарь

@Анастасия, что?

Анастасия

@Назар Токарь, как изменить координаты слайдера?

Назар Токарь

Какие координаты? Широту и долготу?

Александр

Тут всех интересует движущий слайдер, а автор выложил не движущий)Откликнетесь, хоть один, кого интересует не движущий слайдер..

igorfelix

Подскажите пожалуйста кто-нибудь, как сделать что бы слайдер сам листался каждые 2 сек ?

Александр

@igorfelix, я до сих пор не сделал( Дедушка молчит)

Назар Токарь

@Александр, я уже ответил на этот вопрос выше. Есть сотня слайдеров с кучей вариантов анимации — выбирайте. Этот отличается простотой, разве сложно это понять?

Дмитрий

@Назар Токарь, походите по сайтам.. 99% слайдеров вращаются сами и это правильно!

Назар Токарь

Вращаются многие. Но я не считаю это правильным.

Дмитрий

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

Назар Токарь

@Дмитрий, если вы обратите внимание на название урока, то увидите, что этот слайдер должен быть простым и быстрым. Более того, ненавязчивым, что следует из обсуждения. Вы, кстати, вправе выбирать, какие именно уроки вам читать и изучать.

Дмитрий

@Назар Токарь, от автоматической прокрутки он не станет сложнее и медленнее. Все равно что сделать машину без возможности встроить туда магнитолу только потому что автора заколебала музыка.

Анастасия

@Назар Токарь, отличный урок, спасибо! Я согласна с вами, идея слайдера понятна, люди ждут что вы все сделаете за них, а они скопипастят готовое решение не задумываясь :)

Назар Токарь

@Анастасия, примерно так :)

Дмитрий

действительно очень актуальный вопрос как заставить слайдер двигаться самому по себе. Это же не “must have”.. Каждый вставить себе эту функцию если посчитает нужным.

Александр

А возможно ли сделать, что бы он сам пролистовался каждые 2 секунды

Назар Токарь

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

Александр

@Назар Токарь, можете подсказать какую функцию нужно дописать и куда ее нужно вставить.

Денис

@Назар Токарь, Напишите пожалуйста нужную функцию, очень нужно)

Назар Токарь

@Денис, прошу обратить внимание на предпоследний абзац.

Александр

@Назар Токарь, нас не раздражает анимация, просто скажите что нужно дописать и все. Кому надо тот допишет, кому не надо тот не будет дописывать. Не че тут страшного я не вижу)

Равиль

Здравствуйте, Назар! Возможно ли вместо имеющейся навигации сделать стрелки влево/вправо на изображении? Спасибо!

Назар Токарь

@Равиль, вместо номеров фото или в дополнение к ним?

Равиль

@Назар Токарь, наверное лучше в дополнение к ним, например, при наведении курсора на рисунок, по бокам появляются полупрозрачные стрелки.

Назар Токарь

@Равиль, идея хорошая, я подумаю, как такое сделать. Спасибо.

Светлана

Подключила. Не хотят меняться фотографии.
Можно ли делать так?

Если нет, можно ли задавать .slider различные параметры, типа background: -moz-linear-gradient или border-radius?
Заранее спасибо.

Назар Токарь

@Светлана, делать как? Слайдеру можно задавать любые стили через CSS.

Ганс Гелленберг

было бы хорошо если комментарии добавил,но спасибо большое!буду разбирать!

Mak

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

Назар Токарь

Как, например? Подробнее объясните.

mak

@Назар Токарь, вот о чем я говорю:
http://responsiveslides.com/ этот слайдер автоматически меняет
ширину в зависимости от размера страницы.
http://www.owlgraphic.com/owlcarousel/ этот умеет показывать
столько элементов сколько помещается на странице (по
горизонтали).

Назар Токарь

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

Mak

@Назар Токарь, да, согласен, у второго концепция слайдера другая.