Назар Токар
Опубліковано: 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. Програміст, адміністратор української Вікіпедії.
← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket
Обговорення

  1. Vazgen

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

  2. Илья

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

  3. QWERTY

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

  4. егор

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

  5. NUR

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

    1. St1Ff

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

  6. Я

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

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

  7. Henry

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

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

  8. Григорий

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

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

  9. Григорий

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

    1. Анастасия

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

  10. Григорий

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

  11. Виталик

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

  12. денис

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

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

    2. денис

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

  13. nikola

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

  14. xsi

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

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

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

    2. xsi

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

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

    4. xsi

      @xsi, вот! )))

      .slider ul {
      width: 9999px;
      }

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

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

  15. Виталий

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

  16. Илья

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

  17. StereoTeep

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

  18. Avtandil

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

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

    2. Avtandil

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

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

  19. Сергей

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

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

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

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

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

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

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

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

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

  21. kor

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