19.12.2016 07:09
logik444 2 883 Источник
Для начала необходимо создать html разметку под слайдер.

#content — имитация блока на сайте, внутрь которого мы будем помещать сам слайдер.
#slider -блок самого слайдера
.left,.right — кнопки управления
.images — блок с картинками
.pict — дивы, которые оборачивают изображения

    <div id="content">
        <div id = "slider">
            <div class="left"><img src="images/arrow.png"></div>
            <div class="right"><img src="images/arrow.png"></div>
                <div class="images">
                    <div class="pict"><img src="images/1.jpg"></div>
                    <div class="pict"><img src="images/2.jpg"></div>
                    <div class="pict"><img src="images/3.jpg"></div>
                </div>
        </div>
    </div>

Далее css, в нем нет ничего сложного. Все изображения получают float:left, #slider получает позиционирование relative, чтобы кнопки управления можно было выровнять с помощью absolute. Правая кнопка поворачивается на 180 градусов, чтобы не пришлось использовать еще одну картинку стрелки.

#content {
    margin: 200px auto;
    height: 500px;
    width: 1000px;
}

#slider{
    width: 100%;
    height: 100%;
    position: relative;
    overflow:hidden;
}

    #slider .left,.right{
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        position: absolute;
        top:40%;
        cursor: pointer;
    }

    #slider .left{
        left: 0;
    }

    #slider .right{
        right: 0;
    }
        #slider .left img{
            width: 50px;
            height: 50px;
        }
        #slider .right img{
            width: 50px;
            height: 50px;
            transform: rotate(180deg);
        }
    #slider .images .pict{
        float: left;
   
    }

Далее jQuery, тут также нет ничего особо сложного. Основной принцип работы слайдера — смещение у .images свойства marginLeft. «Бесконечность» достигается с помощью перемещения последнего или первого слайда с помощью .prependTo и .appendTo соответственно.

В начале объявляются переменные, которым присваиваются размеры .pict и .image, с помощью .length узнается количество изображений, задается общая длина блока как (количество+1(из-за смещения))*на длину одного.

    var pictW,imgW,n,pict,img,currentM,end=true;
    pict = $('#slider .pict');
    img = $('#slider .images');
    pictW = parseInt(pict.width());
    n = pict.length;
    imgW=(n+1)*pictW;
    img.width(imgW);

В этом фрагменте происходит перенос последнего слайда в начало, и смещение на 1 слайд в право.

 $('#slider .pict:last').prependTo('.images');
    currentM = -pictW;

Далее код обработки нажатия на правую кнопку. Переменная end не дает листать дальше, пока не закончилась анимация. При нажатии анимировано изменяется свойство marginLeft на величину текущая минус ширина одного слайда. После выполнения анимации первый слайд переносится в конец, а marginLeft возвращается к старому значению.

     $('#slider .right').click(function(event){
        if(end) {
            end=false;
            currentM = currentM - pictW;
            img.animate({
                marginLeft: currentM
            }, speed,  function () {
                end = true;
                $('#slider .pict:first').appendTo('.images');
                currentM = currentM + pictW;
                img.css('marginLeft',currentM);
            });
        }
    });

Для левой кнопки все противоположно. Свойство marginLeft изменяется на величину текущая плюс ширина одного слайда и переносится последний слайд в самое начало ряда.

Полный код
$(function () {
    const speed = 500;

    var pictW,imgW,n,pict,img,currentM,end=true;
    pict = $('#slider .pict');
    img = $('#slider .images');
    pictW = parseInt(pict.width());
    n = pict.length;
    imgW=(n+1)*pictW;
    img.width(imgW);
    $('#slider .pict:last').prependTo('.images');
    currentM = -pictW;

    img.css('marginLeft',currentM);

    $('#slider .left').click(function(event){
        if(end) {
            end=false;
            currentM = currentM + pictW;
            img.animate({
                marginLeft: currentM
            }, speed,  function () {
                end = true;
                $('.pict:last').prependTo('.images');
                currentM = currentM - pictW;
                img.css('marginLeft',currentM);
            });
        }
    });

    $('#slider .right').click(function(event){
        if(end) {
            end=false;
            currentM = currentM - pictW;
            img.animate({
                marginLeft: currentM
            }, speed,  function () {
                end = true;
                $('#slider .pict:first').appendTo('.images');
                currentM = currentM + pictW;
                img.css('marginLeft',currentM);
            });
        }
    });
});

Главными достоинствами данного слайдера является простота и возможность встраивать неограниченное количество изображений. Спасибо за внимание.
Поделиться с друзьями
-->

Комментарии (2)


  1. GreatRash
    19.12.2016 10:45
    #9971528

    Бесконечная карусель на jQuery


  1. Writerim
    19.12.2016 10:46
    #9971530
    +2

    Если в слайдере будет 100+ изображений — пользователь вас изматерит ожидаем загрузки страницы. Нужно загружать только первый слайд а остальные пути держать в js.дальше подгружать просто.
    Из этого следует следующее — вам в принципе отпадает надобность иметь больше 2 дивов в слайдере, так как вы будете манипулировать изображениями на уровне js.

    Следующий момент — используйте правильно селекты в jquery. Хотя бы $('#slider .pict:first') можно менять спокойно на $('#slider').find('.pict').first(). Это опуская тот момент, что в 5 дивах можно сделать спокойно у каждого id