Уже несколько раз меня просили рассказать, как сделать слайдер на 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 после изменения размеров картинок.

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

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

Отправить ответ

120 Комментарий на "Как создать простой и быстрый слайдер изображений на jQuery"

Уведомлять
avatar
5000
Михаил
Гость

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

Андрей
Гость

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

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

Дмитрий
Гость

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

Таня
Гость

Интересный слайдер.
Подскажите, как его настроить, чтобы отображался на 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
Гость

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

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
Участник

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

Анастасия
Гость

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

Анастасия
Гость

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

Александр
Гость

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

igorfelix
Гость

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

Александр
Гость

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

Дмитрий
Гость

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

Дмитрий
Гость

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

Анастасия
Гость

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

Дмитрий
Гость

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

Дмитрий
Гость

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

Александр
Гость

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

Денис
Гость

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

Александр
Гость

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

Александр
Гость

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

Равиль
Гость

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

Равиль
Гость

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

Светлана
Гость

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

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

Ганс Гелленберг
Гость

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

Mak
Гость

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

mak
Гость

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

Mak
Гость

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

wpDiscuz