Стильный слайдер на jQuery

Всех приветствую! В данном уроке будет рассмотрено создание стильного слайдера, как одного из самых часто используемых анимированных элементов на страницах различных веб сайтов. Разработку нашего слайдера можно разбить на три этапа. Первый и второй этап, мы рассмотрим вместе, а третий вынесем для отдельного рассмотрения, так как он является ключевым в работе слайдера.

<div class="slider"> 
     <ul> 
           <li><img src="img/slider/1.jpg"></li> 
           <li><img src="img/slider/2.jpg"></li> 
           <li><img src="img/slider/3.jpg"></li> 
           <li><img src="img/slider/4.jpg"></li> 
           <li><img src="img/slider/5.jpg"></li> 
     </ul> 
</div> 

Этот блок должен соответствовать некоторым правилам, которые задаются при помощи таблицы стилей CSS. Во-первых, размер каждого слайда должен быть идентичен контейнеру, в котором они отображаются. Во-вторых, переключение между слайдами будет происходить посредством перемещения списка, который выступает слоем, размещенным под контейнером, поэтому контент, что находится за пределами контейнера, не должен отображаться на странице. В-третьих, для более удобного переключения слайдов все пункты списка должны быть размещены на одной горизонтали. Все эти правила описаны в следующих стилях:

.slider{

width:409px;

height:256px;

overflow:hidden;

}

.slider > ul{

width:999999px;

position:relative;

left:0;

}

.slider > ul > li{

width:409px;

height:256px;

float:left;

list-style:none;

}

Следующим элементом слайдера идут кнопки для переключения на следующий, предыдущий слайд. Каким html тегом они представлены не имеет существенного значения. Для примера, приведенного в данном уроке, были использованы div блоки с классами, имеющими далеко не двусмысленные имена: «next» и «prev» (от англ. “previous”). Их положение на странице и стили так же не играет никакой роли, главное, чтобы они находились за пределами контейнера со слайдами.

Третьим элементом идет некое подобие статус-бара, который указывает на текущий слайд из списка, а так же имеет возможность переключения на произвольный слайд, а не только на следующий и предыдущий по отношению к текущему. Этот элемент, так же как и первый, представляет собой список. Так же как и второй элемент, этот список не должен находиться внутри контейнера слайдера, а так же обязательно должен состоять из того же количества пунктов, что и список со слайдами. Помимо этого, для третьего элемента нашего слайдера нет никаких ограничений.

Ну вот, пришло время приступить к третьему этапу создания приведенного в уроке слайдера. В третьем пункте, данного урока, я расскажу Вам, как устроен код javascript для слайдера. Для начала определимся с тем, что нам требуется от скрипта для его реализации. Во-первых, найти активные элементы слайдера, во-вторых назначить им событие (вызываемая функция, в нашем случае при нажатии на элемент), в-третьих, задать анимированное переключение между слайдами. Во всех трех случаях удобнее использовать фреймворк jquery, содержащий мощные инструменты для решения подобных задач, вместо того, чтобы самим писать давно уже реализованные другими функции. Теперь переходим непосредственно к реализации. Для начала подключаем библиотеку jquery:

<script type="text/javascript" language="javascript" src="js/jquery-2.0.3.min.js"></script>

После этого можно приступать к написанию функций. Функции в скрипте можно разделить по назначению на два блока. Первый блок – функции, которые вызываются при срабатывании событий:

/* переход на произвольный слайд */
var slchange = function(index){ 
    clearev();
    $(".switch li").removeClass("active");
    $(this).addClass("active");
    $(".slider > ul").animate(
{left:-409*index+"px"}, 500, addev);
}
        
var next = function(){ /* на следующий слайд */
    clearev();
    if($(".slider > ul").position()
.left <= -409*($(".switch li").length-1))
    {
        $(".slider > ul").animate({left:"0"}, 500, addev);
        $(".switch li").removeClass("active");
        $(".switch li").first().addClass("active");
    }
    else
    {
        var left = $(".slider > ul").position().left-409
        $(".slider > ul").animate({left:left+"px"},
500, addev);
        $(".switch li").removeClass("active");
        $(".switch li").eq(left/409*-1).addClass("active");
    }
}
        
var prev = function(){ /* на предыдущий слайд */
    clearev();
    if($(".slider > ul").position().left >= 0)
    {
        $(".slider > ul").animate(
{left:-409*($(".switch li").length-1)+"px"},
500, addev);
        $(".switch li").removeClass("active");
        $(".switch li").last().addClass("active");
    }
    else
    {
        var left = $(".slider > ul").position().left+409
        $(".slider > ul").animate({left:left+"px"},
500, addev);
        $(".switch li").removeClass("active");
        $(".switch li").eq(left/409*-1).addClass("active");
    }
}

Второй блок – включение и отключение вызова выше описанных функций при возникновении события:

var addev = function(){ /* включение вызова функций */
    $(".next").on("click", next);
    $(".prev").on("click", prev);
    intervalID = setInterval(next, 2000);
    $(".switch li").each(function(index, element){
        $(element).on("click", function(){
            clearev();
            $(".switch li")
.removeClass("active");
            $(this).addClass("active");
            $(".slider > ul").animate(
{left:-409*$(this).index()+"px"},
500, addev);
        });
    });
}

var clearev = function(){ /* выключение вызова функций */
    $(".next").unbind();
    $(".prev").unbind();
    clearInterval(intervalID);
    $(".switch li").unbind();
}

Данные две функции написаны во избежания конфликтов при попытке вызвать функцию до завершения анимации, запущенной при предыдущем вызове одной из трех функций-действий. Также для Вас имеется еще один красивый слайдер для сайта, посмотрите, может понравится!  На этом наш урок по стильному слайдеру на JQuery окончен. Спасибо всем за внимание!