Уже несколько раз меня просили рассказать, как сделать слайдер на 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 после изменения размеров картинок.
Демо и скачать
Нужна версия с автоматической прокруткой?
Напишите плиз функцию чтобы слайдер листал фото
Если вы уже оборачиваете $(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, про тестовую картинку я понял, а стили сайта могут перекрывать стили слайдера.
@xsi, вот! )))
.slider ul {
width: 9999px;
}
меняю на 999999px и все ок ))
спасибо))
@xsi, значит, у вас слишком много картинок.
Добрый вечер. Слайдер отличный, благодарю. Я вставил второй слайдер для видеоотзывов, но на нём не отображается меню переключения слайдов. Не подскажите почему?
Подскажите пожалуйста, какой код должен быть для кнопок ‘left’ и ‘prev’?
Добрый день, подскажите как сделать прокрутку снизу вверх?
В режиме прокрутки слайдов автоматом при размещении на странице двух слайдеров с разным количеством слайдов происходит котовасия, можно-ли как нибудь это подправить?
@Avtandil, где вы нашли автоматическую прокрутку слайдов, если я её не делал?
@Назар Токарь, Внизу, в коментах, коммент от 4 августа 2014, 09:52
@Avtandil, ок, спросите у автора кода, это не мой код.
В данный слайдер подключил второй библиотеку JQM:
А теперь не получается вставить код для работы слайдера на сенсорных устройствах. Вот код:
Подскажи пж что нужно поменять и куда вставить чтоб данный слайдер заработал на планшете?
За ранее спасибо добрым людям.
Подскажи, некорректно работает на сайте – что изменить?
тсц-феерия.рф
@Эдуард Фурман, у Вас в css файле, похоже, или для ul или для li стоит margin.
напишите примерно такое:
@Максим Саенко, спасибо, там ошибка была только в Padding нужно было вставить:0!important и тогда корректно отображается.
Если ставить еще и в Margin, то один и тот же файл остается. То есть оставил там только: 0.
@Эдуард Фурман, Ну… не видя кода точно не скажешь что именно править нужно… я навскидку сказал… что-то одно подправили — заработало!
Как сделать чтобы слайдер был по центру
// var step = $(bl).width();
var step = 670; // якщо ширина різна то ширину вказати ручками
Огромное спасибо!
Отличный слайдер!
все круто. но как завязать в адаптивный? т.е. 700px поменять на проценты – пробую, ничего не получается. заранее спс.
@Diman, ds
max-width
пробовали использовать?@Назар Токарь, нет. поясните подробнее, если это возможно
@Diman, пробывал max-width – ничего не получилось. Дайте развернутый ответ пожалуйста (с кодом). Считаю, в современных условиях, вопрос более чем актуальный – другими словами – если б ваш слайдер корректно работал на всех устройствах, цены б ему не было. Заранее спасибо.
@Diman, в смысле?
@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 заменил – не люблю, когда суета…
@Михаил, Скажите, а куда вот эту “крутилку” прописывать!? В какой строке!??? Куда, короче! :)))
Спасибо заранее!
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). Ваш – первый, который заработал!
Автопрокрутка слайдов:
Перед функцией –
допишите:
@Евгений, спасибо Вам, как раз искал решение!
@Алексей, Спасибо, без авто переключения слайд полумёртвый. Почему автор не включил странно. Но сам слайд хорош своей простотой за что респект
@Ксения, я объяснил в посте, почему.
Доброго времени суток
Использую CMS Simpla 2.2.1
Не могу понять куда эти строки вписывать
если вписываю в файл шаблона page.tlp то картинки либо не появляются, либо одна под другой находятся
помогите пожалуйста что не так делаю
а как дабавить Ссылку “Следующий” и “Педыдущий”?
@veko, такого я в этом скрипте не делал
Не разбираюсь в jQuery, но тут вроде как все просто. Только одно не понятно – почему он не отображает элементы, идущие после девятого (чей индекс rel становится двузначным)?
Судя по всему, проблема в этой строчке:
var obj = $(this).attr(“rel”);
Так как тут все правильно создает в браузере:
$(obj).find(“.nav”).append(“”);
Знал бы jQuery получше, может бы сам нашел ответ. Думаю, не мне одному будет интересно.
Все оказалось очень просто)
изначально указан width: .slider ul {width: 9999px; }
Значение тут вместо 9999 должно быть равно суммарной ширине всех Ваших изображений, т.е. если у вас 100 изображений по 1024 пикселя, то должно быть так
.slider ul {width: 102400px; }
спасибо, мне нужен был именно не движущий слайдер, полько у меня 25 картинок не показивает выше 14. кружочек 25 а выше 14 показивает белый фон.
Спасибо ,слайдер супер.Все легко установила и подстроила размер и фото.Но единственная проблемка это он не меняет фото сам ,надо нажимать на кружок.Это можно исправить добавить функции .
Вообщем спасибки.))
@Rina, а он и не должен менять их сам :)
как наложить слайдер на картинку и поменять его координаты
@Анастасия, что?
@Назар Токарь, как изменить координаты слайдера?
Какие координаты? Широту и долготу?
Тут всех интересует движущий слайдер, а автор выложил не движущий)Откликнетесь, хоть один, кого интересует не движущий слайдер..
Подскажите пожалуйста кто-нибудь, как сделать что бы слайдер сам листался каждые 2 сек ?
@igorfelix, я до сих пор не сделал( Дедушка молчит)
@Александр, я уже ответил на этот вопрос выше. Есть сотня слайдеров с кучей вариантов анимации — выбирайте. Этот отличается простотой, разве сложно это понять?
@Назар Токарь, походите по сайтам.. 99% слайдеров вращаются сами и это правильно!
Вращаются многие. Но я не считаю это правильным.
@Назар Токарь, Поэтому сложно написать тем кто нуждается в анимации вашего слайдера – написать как это сделать? Совет – лучше не выкладывайте уроки тогда вообще.
@Дмитрий, если вы обратите внимание на название урока, то увидите, что этот слайдер должен быть простым и быстрым. Более того, ненавязчивым, что следует из обсуждения. Вы, кстати, вправе выбирать, какие именно уроки вам читать и изучать.
@Назар Токарь, от автоматической прокрутки он не станет сложнее и медленнее. Все равно что сделать машину без возможности встроить туда магнитолу только потому что автора заколебала музыка.
@Назар Токарь, отличный урок, спасибо! Я согласна с вами, идея слайдера понятна, люди ждут что вы все сделаете за них, а они скопипастят готовое решение не задумываясь :)
@Анастасия, примерно так :)
действительно очень актуальный вопрос как заставить слайдер двигаться самому по себе. Это же не “must have”.. Каждый вставить себе эту функцию если посчитает нужным.
А возможно ли сделать, что бы он сам пролистовался каждые 2 секунды
Да, допишите функцию, которая будет запускаться каждые 2 сек и пролистывать скролл.
@Назар Токарь, можете подсказать какую функцию нужно дописать и куда ее нужно вставить.
@Назар Токарь, Напишите пожалуйста нужную функцию, очень нужно)
@Денис, прошу обратить внимание на предпоследний абзац.
@Назар Токарь, нас не раздражает анимация, просто скажите что нужно дописать и все. Кому надо тот допишет, кому не надо тот не будет дописывать. Не че тут страшного я не вижу)
Здравствуйте, Назар! Возможно ли вместо имеющейся навигации сделать стрелки влево/вправо на изображении? Спасибо!
@Равиль, вместо номеров фото или в дополнение к ним?
@Назар Токарь, наверное лучше в дополнение к ним, например, при наведении курсора на рисунок, по бокам появляются полупрозрачные стрелки.
@Равиль, идея хорошая, я подумаю, как такое сделать. Спасибо.
Подключила. Не хотят меняться фотографии.
Можно ли делать так?
Если нет, можно ли задавать .slider различные параметры, типа background: -moz-linear-gradient или border-radius?
Заранее спасибо.
@Светлана, делать как? Слайдеру можно задавать любые стили через CSS.
было бы хорошо если комментарии добавил,но спасибо большое!буду разбирать!
Спасибо, было бы круто если бы слайдер умел адаптироваться под размер страницы.
Как, например? Подробнее объясните.
@Назар Токарь, вот о чем я говорю:
http://responsiveslides.com/ этот слайдер автоматически меняет
ширину в зависимости от размера страницы.
http://www.owlgraphic.com/owlcarousel/ этот умеет показывать
столько элементов сколько помещается на странице (по
горизонтали).
Сжимать по мере уменьшения экрана это вариант. А показывать несколько подряд это как бы саму чуть слайдера меняет, когда показывается одна и меняется на следующую.
@Назар Токарь, да, согласен, у второго концепция слайдера другая.