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

ADMIN

Команда форума
Administrator
Модератор
Регистрация
18.07.2018
Сообщения
752
Симпатии
134
Баллы
110
#1
Для начала рекомендую вам посетить сайт, на котором много полезной информации для вашего гаджета Смотрите тут
Адаптивный слайдер карусель, с плавным эффектом автопрокрутки 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

Код:
n(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/.

На этом все.
 
Вверх