Колись я вирішив, що ще один слайдер інтернетові не завадить, тож і поділився з вами своїм самописним скриптом. Нічого складного, просте перекручування слайдів і автоматичне меню в нижній частині. Як виявилось, охочих поставити собі таку крутилку було досить багато. А мало не кожен п’ятий з них просив мене зробити автоматичну прокрутку.
Моя думка така: слайдер має прокручуватись виключно за бажанням користувача. І тому будь-яка анімація на сторінці без його відома (те ж стосується автопрогравання відео і звуку) — є хамством щодо відвідувача.
Але ще більше хамство — ігнорувати прохання, тож будь ласка, ось вам рецепт, як зробити автоматичну прокрутку в моєму слайдері.
Автоматична прокрутка
Для початку подивіться, як працює слайдер. Всі налаштування і код я взяв з попереднього уроку і доправював його, для зручності викладу тут код окремо. Його буде достатньо для створення нового слайдеру як з анімацією, так і без неї. Тож, поїхали.
Підключіть jQuery
Бажано, найсвіжішу версію:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Додайте HTML слайдера
Для прикладу візьмемо п’ять однакових за розмірами зображень, кожне має бути в окремому елементі списку:
<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>
В CSS треба додати стилі, які будуть використовуватись для оформлення. Ну, ви й самі все знаєте:
<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>
А тепер найцікавіше, сам JS:
<script type="text/javascript"> $(document).ready(function() { $(".slider").each(function() { var repeats = 5, // кількість повторювань автоматичного прокручування interval = 1, // інтервал в секундах repeat = true, // чи треба автоматично прокручувати (true/false) slider = $(this), repeatCount = 0, elements = $(slider).find("li").length; $(slider) .append("<div class='nav'></div>") .find("li").each(function() { $(slider).find(".nav").append("<span data-slide='"+$(this).index()+"'></span>"); $(this).attr("data-slide", $(this).index()); }) .end() .find("span").first().addClass("on"); // add timeout if (repeat) { repeat = setInterval(function() { if (repeatCount >= repeats - 1) { window.clearInterval(repeat); } var index = $(slider).find('.on').data("slide"), nextIndex = index + 1 < elements ? index + 1 : 0; sliderJS(nextIndex, slider); repeatCount += 1; }, interval * 1000); } }); }); function sliderJS(index, slider) { // slide var ul = $(slider).find("ul"), bl = $(slider).find("li[data-slide=" + index + "]"), step = $(bl).width(); $(slider) .find("span").removeClass("on") .end() .find("span[data-slide=" + index + "]").addClass("on"); $(ul).animate({ marginLeft: "-" + step * index }, 500); } $(document).on("click", ".slider .nav span", function(e) { // slider click navigate e.preventDefault(); var slider = $(this).closest(".slider"), index = $(this).data("slide"); sliderJS(index, slider); }); </script>
Далі трохи поясню.
Налаштування
Блок з налаштуваннями виглядає так:
var repeats = 5, // кількість повторювань автоматичного прокручування interval = 1, // інтервал в секундах repeat = true, // чи треба автоматично прокручувати (true/false) slider = $(this), repeatCount = 0, elements = $(slider).find("li").length;
Якщо вам не потрібна автоматична прокрутка, призначайте repeat = false
, останні налаштування будуть проігноровані.
Нагадаю: за замовчуванням розмір блоку 700 х 290 пікселів, його можна міняти як завгодно. Не забудьте після цього також оновити CSS.
Дякую Вам! Дуже допомогли! Успіхів Вашому каналу!
Дякую за слайдер, але в мене теж після повернення на перше фото зупиняється(і в демо)
а можна налаштувати ротатор, що б після повернення до першого фото знову “листав” фото
Він так і працює: після останнього перекручує на перший слайд.
Подивіться демо
он перекручивает на первый слайд и останавливается, а как сделать чтоб продолжал двигать?
подскажите пожалуйста, очень срочно надо T_T
¯\_(ツ)_/¯
А Почему нет русского языка?
Не могу знать, вчера был!
А взагалі дивно чути такі питання від людини з Запоріжжя.
Если быть честным,то в Запорожье по русски разговаривает большинство,как и в целом в Украине.Вы видимо какой то фобией заразились на политической почве)
Привіт, а як ваш коментар пов’язаний з jQuery? =)