Адаптивный слайдер карусель, с плавным эффектом автопрокрутки HTML5 + CSS3 + jQuery

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

Адаптивный слайдер карусель, с плавным эффектом автопрокрутки HTML5 + CSS3 + jQuery
3 месяца назад

Адаптивный слайдер карусель, с плавным эффектом автопрокрутки HTML5 + CSS3 + jQuery

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

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

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

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

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

А теперь давайте приступим! Создадим и откроем файл index.htm и пропишем туда нужную нам разметку:
content.htm
<div id="slider-wrap">
    <div id="active-slide">
        <div id="slider">
            <div class="slide"><img src="1.jpg"></div>
            <div class="slide"><img src="2.jpg"></div>
            <div class="slide"><img src="3.jpg"></div>
            <div class="slide"><img src="4.jpg"></div>
        </div>
    </div>
</div>
В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение и выравнивает слайдер по середине экрана. Параметр active-slide задает размер и высоту картинки согласно ее длине. И slider показывает только активную картинку.

Теперь создадим и откроем файл style.css и пропишем туда нужную нам разметку:
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

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

#slider-wrap{ 
    max-width:800px;
    margin: 0 auto;
    margin-top: 80px;
}

#active-slide {
    width: 100%;
    display: table;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#slider{
    position: relative;
    width: calc(100% * 4);
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.slide{
    width: calc(100%/4);
    list-style: none;
    display: inline;
    float: left;
}

.slide img {
    width:100%;
}

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

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

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

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

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

#prewbutton {
    left:10px;
}

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

#prewbutton:hover, #nextbutton:hover {
    opacity:1;
}
В свойстве стиля slider-wrap пропишите width – максимальную длину ваших картинок.

В свойстве стиля #slider { width: calc(100% * 4); } и .slide { width: calc(100%/4); } укажите количество картинок в вашем слайдере. В нашем примере их 4.

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

Теперь создадим и откроем наш файл slider.js, в котором и будет код слайдера. Не забудьте подключить библиотеку jQuery.
slider.js
$(document).ready(function () {

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

var slideNum = 1;
var slideTime;
slideCount = $("#slider .slide").length;

var animSlide = function(arrow){
    clearTimeout(slideTime); 

    if(arrow == "next"){
	  if(slideNum == slideCount) { slideNum=1; }
	  else{slideNum++}
       translateWidth = -$('#active-slide').width() * (slideNum - 1);
       $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }
    else if(arrow == "prew")
    {	
       if(slideNum == 1) { slideNum=slideCount; }
	  else{slideNum-=1}
	  translateWidth = -$('#active-slide').width() * (slideNum - 1); 
       $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }else{
       slideNum = arrow;
	  translateWidth = -$('#active-slide').width() * (slideNum -1);
       $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }

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

    if(RadioBut){
    var $linkArrow = $('<a id="prewbutton" href="#">&lt;</a><a id="nextbutton" href="#">&gt;</a>')
        .prependTo('#active-slide');
        $('#nextbutton').click(function(){
           animSlide("next");
           return false;
           })
        $('#prewbutton').click(function(){
           animSlide("prew");
           return false;
           })
    }
        var adderSpan = '';
        $('.slide').each(function(index) {
               adderSpan += '<span class = "ctrl-select">' + index + '</span>';
           });
        $('<div class ="Radio-But">' + adderSpan +'</div>').appendTo('#slider-wrap');
        $(".ctrl-select:first").addClass("active");
        $('.ctrl-select').click(function(){
        var goToNum = parseFloat($(this).text());
        animSlide(goToNum + 1);
        });
        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 возвращает предыдущий, а числовое значение это определенно заданный слайд, выбранный через радио кнопки под слайдом.

В представленном слайдере использовались картинки с веб-ресурса https://pixabay.com/.

На этом все.
581
Демо Скачать
Комментарии
  • Александр1 неделя назад
    Очень понравился слайдер! Спасибо! Подскажите пожалуйста, как сделать, чтобы шла непрерывная прокрутка.
    Ответить

×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.