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

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

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

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

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

Підключіть jQuery

Бажано, найсвіжішу версію:

<script type="text/javascript" src="https://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.

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

Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

10 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією
Елизавета

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

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

Автор
Назар Токар

Він так і працює: після останнього перекручує на перший слайд.
Подивіться http://dedushka.org/demo/slider/auto.html">демо

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

Автор

¯\_(ツ)_/¯

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

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

Автор
Назар Токар

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

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

Автор
Назар Токар

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