Колись я вирішив, що ще один слайдер інтернетові не завадить, тож і поділився з вами своїм самописним скриптом. Нічого складного, просте перекручування слайдів і автоматичне меню в нижній частині. Як виявилось, охочих поставити собі таку крутилку було досить багато. А мало не кожен п’ятий з них просив мене зробити автоматичну прокрутку.

Моя думка така: слайдер має прокручуватись виключно за бажанням користувача. І тому будь-яка анімація на сторінці без його відома (те ж стосується автопрогравання відео і звуку) — є хамством щодо відвідувача.

Але ще більше хамство — ігнорувати прохання, тож будь ласка, ось вам рецепт, як зробити автоматичну прокрутку в моєму слайдері.

Автоматична прокрутка

Для початку подивіться, як працює слайдер. Всі налаштування і код я взяв з попереднього уроку і доправював його, для зручності викладу тут код окремо. Його буде достатньо для створення нового слайдеру як з анімацією, так і без неї. Тож, поїхали.

Підключіть 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.

Подивитись і скачати

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
Елизавета

Дякую за слайдер, але в мене теж після повернення на перше фото зупиняється(і в демо)

Eric Hurash

а можна налаштувати ротатор, що б після повернення до першого фото знову “листав” фото

Назар Токар

Він так і працює: після останнього перекручує на перший слайд.
Подивіться демо

Виктория

он перекручивает на первый слайд и останавливается, а как сделать чтоб продолжал двигать?

Виктория

подскажите пожалуйста, очень срочно надо T_T

Назар Токар

¯\_(ツ)_/¯

арт

А Почему нет русского языка?

Назар Токарь

Не могу знать, вчера был!
А взагалі дивно чути такі питання від людини з Запоріжжя.

Андрей

Если быть честным,то в Запорожье по русски разговаривает большинство,как и в целом в Украине.Вы видимо какой то фобией заразились на политической почве)

Назар Токар

Привіт, а як ваш коментар пов’язаний з jQuery? =)