Назар Токар
Опубліковано: 17 Листопада 2013
Оновлено: 4 Травня 2017

Уже несколько раз меня просили рассказать, как сделать слайдер на 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 Будьте в курсі. Долучайтесь до нашого каналу в Telegram.

Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

120 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією

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

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

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

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

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

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

А где сам урок-то????

Куда пропал?

Кто может-дайте ссылочку!!!

Пожалуйста

Автор
Назар Токар

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

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

Автор
Назар Токар

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

Автор
Назар Токар

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

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

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

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

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

Автор
Назар Токар

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

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

@xsi, вот! )))

.slider ul {

width: 9999px;

}

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

спасибо))

Автор
Назар Токар

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

Автор
Назар Токар

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

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

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

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

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

Автор
Назар Токар

@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.

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

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

Огромное спасибо!

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

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

Автор
Назар Токар

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

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

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

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

Автор
Назар Токар

@Diman, в смысле?

Александр

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

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

Автор
Назар Токар

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

@Назар Токарь,

Наверное, не верно выразился.

Хочу, чтоб текст из 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, так вы же добавили крутилку, я понятия не имею, что вы дописывали, поэтмоу вопрос к вам :)

@Назар Токарь, 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 заменил - не люблю, когда суета...

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

Спасибо заранее!

Завантажити ще