Делаем бесконечный слайдер jquery своими руками, очень просто.

В предыдущих 2-х статьях о слайдерах мы рассматривали создание слайдера на jquery и слайдер со стрелочками на jquery.

бесконечный слайдер jquery

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

На самом деле сложного в разработке бесконечного слайдера на jquery нет ничего. Нужно просто копировать первый слайд и вставлять его за последним (или копировать последний слайд и вставлять перед первым, при обратном вращении).

Что нужно знать о jQuery для того, чтобы сделать бесконечный слайдер jquery

У jQuery есть превосходная функция clone, которая создаёт полный дубликат нужного элемента, и передаёт её в переменную, для того, чтобы можно было что-то с ней сделать (модифицировать, добавить к какому-нибудь элементу и т.п.).

Работает эта универсальная функция очень просто:

new_element=$(selector).clone();

Возьмём эту функцию за основу нашего бесконечного слайдера jquery, с её помощью будем копировать нужный слайд (первый или последний).

Модифицируем слайдер так, чтобы получить бесконечный слайдер jquery

Итак, модифицируем наш рабочий слайдер из предидущей статьи (как создать слайдер на jQuery) так, чтобы слайды двигались в одном направлении бесконечно.

HTML и CSS в этом случае править не нужно.

Нужно только модифицировать функцию показа слайда (у нас в этой функции была проверка «этот слайд последний?», и если проверка срабатывала, то слайдер переходил к первому слайду). Нужно её переделать так, чтобы, если текущий слайд последний, за ним добавлялся клон первого слайда (при этом настоящий первый слайд нужно удалять, чтобы не мусорить).

Изменим сначала функцию nextSlide:

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
    
    
}

Изменения коснулись только проверки «последний ли сейчас слайд».
В ней мы смещаем позицию ul, который является контейнером всех слайдов, так, чтобы текущий слайд остался текущим, если удалить первый слайд из списка слайдов (при удалении длинна элементов сократится, и они все из-за CSS float: left сместятся влево на один слайд). Клонируем первый слайд, и вставляем его за текущим последним, и удаляем настоящий первый слайд из списка слайдов. Затем уменьшаем номер текущего слайда на 1 (т.к. после удаления первого слайда, физически последний слайд стал предпоследним) и далее, как и до изменений анимируем слайды для показа следующего слайда (первого-последнего в нашем случае).

Те же действия нужно сделать и с функцией prevSlide. Только саму проверку нужно изменить, чтобы проверять не на последний а на первый слайд. Ну и клонировать/удалять нужно будет последний слайд, а не первый.

function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        $('.slidewrapper').css('left',-(currentSlide+2)*slideWidth);  
        $('.slidewrapper').prepend($('.slidewrapper').children().last().clone()); 
        $('.slidewrapper').children().last().remove();
        currentSlide++;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}

Всё готово, бесконечный слайдер jquery работает. По ссылке () доступен код на jsfiddle, а ниже рабочий пример.

Обратите внимание, что в примере модифицировано также событие hover (при наведении на бесконечный слайдер jquery). Если на слайдер не наводить, то он двигаться вперед. Если навести — останавливается, а если после этого курсор со слайдер убрать, то он двигается бесконечно в обратном направлении, для наглядности.

В этой статье мы разобрали "как сделать бесконечный слайдер jquery". Если будут вопросы — милости просим в комментарии, постараемся ответить на все вопросы и помочь решить все задачи.