Главная
Веб-дизайн
Слайдер изображений или текста

Слайдер для сайта jQuery + CSS с автоматическим перелистыванием

Простой слайдер изображений или текста на jQuery + CSS с автоматическим интервалом переключения слайдов

1 год назад

Слайдер для сайта jQuery + CSS с автоматическим перелистыванием

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

timeList — скорость переключения слайда

TimeView — время показа

RadioBut — кнопки под слайдом, для быстрой навигации (radio buttons). По умолчанию true может принимать значение false.

А теперь давайте приступим! Создадим и откроем файл index.htm и пропишем туда нужную нам разметку:

content.htm

<div id="slider-wrap">
    <div id="slider">
        <div class="slide">
            <h1>Заголовок 1</h1>
            <p>Описание...</p>
        </div>
        <div class="slide">
            <h1>Заголовок 2</h1>
            <p>Описание...</p>
        </div>
        <div class="slide">
            <h1>Заголовок 3</h1>
            <p>Описание...</p>
        </div>
        <div class="slide">
            <h1>Заголовок 4</h1>
            <p>Описание...</p>
        </div>
    </div>
</div>

Внимание! В данном примере использован текст для работы слайда, если вы хотите использовать изображение, то поместите каждую вашу картинку в тег <div class="slide"><img></div>.

В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение слайдера и выравнивает его по середине экрана. Параметр slider позиционирует, и задает высоту нашего слайда свойством height. Если будете использовать слайдер картинок, то укажите высоту картинок в данном свойстве, если высота картинок разная, то укажите максимальную.

Для наилучшей визуализации слайдера и привлекательности используйте одинаковое разрешение картинок.

Теперь нам необходимо стилизовать наш слайдер. Стрелки вперед/назад для переключения слайдов, а также радио кнопки под слайдером, использованы в виде картинок и прилагаются вместе с файлом. Создадим и откроем файл style.css и пропишем туда нужную нам разметку:

style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html, body {
    height: 100%;
}

body {
    color: #4f4f5a;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
}

#slider-wrap { 
    max-width:650px;
    margin: 100px auto;
}

#slider {
    position:relative;
    height: 200px;
    overflow: hidden;
    border:#fafafa solid 10px;
}

.slide {
    width:100%;
    height: 100%; 
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding-top: 40px;
}

.Radio-But {
    margin-top:10px;
    text-align:center;
}

.Radio-But .ctrl-select {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("radioBg.png") center bottom no-repeat;
    margin: 2px;
    overflow: hidden;
    text-indent: -99999px;
}

.Radio-But .ctrl-select:hover {
    cursor: pointer;
    background-position: center center;
}

.Radio-But .ctrl-select.active{
    background-position: center top;
}

#prewBut, #nextBut{
    display: block;
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    overflow: hidden;
    text-indent: -99999px;
    background: url("arrowBg.png") left center no-repeat;
    opacity: 0.5;
    z-index: 3;
    outline: none !important;
}

#prewBut { 
    left: 10px;
}

#nextBut {
    right: 10px;
    background: url("arrowBg.png") right center no-repeat;
}

#prewBut:hover, #nextBut:hover {
    opacity: 1;
}

Если стрелочки вперед/назад мешают видимости вашего слайдера их можно сделать невидимыми, а появляться они будут, лишь при наведении на них. В параметрах prewBut и nextBut, задайте свойству opacity значение 0.

Создадим и откроем наш js-файл, в котором и будет код слайдера. Не забудьте подключить фреймворк jQuery, а также библиотеку jquery.ui — указанная библиотека нам необходима для того, чтобы задать элемент исчезновения и появление слайда. Заменить указанный эффект можно свойством fadeIn и fadeOut.

slider.js

$(document).ready(function () {

var timeList = 300;
var TimeView = 5000;
var RadioBut = true;

$('.slide').hide().eq(0).show();
var slideNum = 0;
var slideTime;
slideCount = $("#slider .slide").length;

var animSlide = function(arrow){
    clearTimeout(slideTime); 
        
    function slideDirectionHide(slideFloatNum, directTo){
            $('.slide').eq(slideFloatNum).fadeOut(timeList); 
    }

    function slideDirectionShow(slideFloatNum, directTo, pause){
            $('.slide').eq(slideFloatNum).fadeIn(timeList, function() {
                if(pause == true) { rotator(); }
            }); 
    }
    
    var old_slideNum = slideNum;
        
    if(arrow == "next"){
            slideDirectionHide(slideNum, "left");
            if(slideNum == (slideCount-1)){slideNum=0;}
            else{slideNum++}
            slideDirectionShow(slideNum, "right", true);
            }
    else if(arrow == "prew")
    {
            slideDirectionHide(slideNum, "right");
            if(slideNum == 0){slideNum=slideCount-1;}
            else{slideNum-=1}
            slideDirectionShow(slideNum, "left", true);
    }else{
                if(arrow !== old_slideNum)
                { 
                    if(arrow > old_slideNum)
                    {
                        slideDirectionHide(slideNum, "left");
                        slideNum = arrow;
                        slideDirectionShow(slideNum, "right", true);
                    }else if(arrow < old_slideNum) {
                        slideDirectionHide(slideNum, "right");
                        slideNum = arrow;
                        slideDirectionShow(slideNum, "left", true);
                    }

                }
    }

    $(".ctrl-select.active").removeClass("active");
    $('.ctrl-select').eq(slideNum).addClass('active');
}


    if(RadioBut){
    var linkArrow = $('<a id="prewBut" href="#">&lt;</a><a id="nextBut" href="#">&gt;</a>')
        .prependTo('#slider');
        $('#nextBut').click(function(){
           animSlide("next");
           return false;
           })
        $('#prewBut').click(function(){
           animSlide("prew");
           return false;
           })
    }
        var addSpan ='';
        $('.slide').each(function(index) {
               addSpan += '<span class = "ctrl-select">' + index + '</span>';
           });
        $('<div class ="Radio-But">' + addSpan +'</div>').appendTo('#slider-wrap');
        $(".ctrl-select:first").addClass("active");
        $('.ctrl-select').click(function(){
        var goToNum = parseFloat($(this).text());
        animSlide(goToNum);
        });
        var pause = false;
        var rotator = function(){
               if(!pause){slideTime = setTimeout(function(){animSlide('next')}, TimeView);}
               }
        $('#slider-wrap').hover(
           function(){clearTimeout(slideTime); pause = true;},
           function(){pause = false; rotator();
           });
        
    var clicking = false;
    var prevX;
    $('.slide').mousedown(function(e){
        clicking = true;
        prevX = e.clientX;
    });

    $('.slide').mouseup(function() {
     clicking = false;
    });

    $(document).mouseup(function(){
        clicking = false;
    });

    $('.slide').mousemove(function(e){
        if(clicking == true)
         {
             if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); }
             if(e.clientX > prevX) { animSlide("prew"); clearTimeout(slideTime); }
           clicking = false;
        }
    });
    $('.slide').hover().css('cursor', 'pointer');
    rotator();  

});

Функция animSlide принимает три вида значений: next, prew, и числовое значение. Параметр next переключает следующий слайд, prew предыдущий, а числовое значение это конкретно выбранный слайд через радио кнопки под слайдом. Функции slideDirectionHide и slideDirectionShow почти схожи и идентичны, первая отвечает за исчезновение слайда и направление движения уходящего слайда, вторая за появление слайда, его направление движения при появлении, а также за заданный интервал времени показа.

При наведении курсора мыши на слайдер показ приостанавливаеться.

На этом все, если что-то не понятно или возникли вопросы, пишите и спрашивайте.

1,5K

Демо Скачать

Комментарии