Как создать слайдер/карусель фото на Javascript

Здесь мы разберем с вами принцип работы слайдеров с фотографиями и как его реализовать на Javascript.

Суть работы слайдера достаточно простая, он состоит из двух основных частей — это контейнер (окно слайдера) и трек (лента с картинками), а далее мы берем трек и двигаем по одной оси в контейнере, тем самым часть фото отображается, а основные «обрезаются». Обрезка происходит с помощью свойства overflow:hidden.

Рассмотрим ниже готовую верстку, стили и скрипт слайдера.

index.hmtl — разметка слайдера

<div class="slider-container">
    <div class="arrow-left">
        <div class="arrow-bg">
            <div class="arrow"></div>
        </div>
    </div>
    <div class="arrow-right">
        <div class="arrow-bg">
            <div class="arrow"></div>
        </div>
    </div>
    <!-- .slider-track - лента с фотографиями -->
    <div class="slider-track">
        <div class="slider-item">
            <img src="img/1.jpg" alt="">
        </div>
        <div class="slider-item">
            <img src="img/2.jpg" alt="">
        </div>
        <div class="slider-item">
            <img src="img/3.jpg" alt="">
        </div>
        <div class="slider-item">
            <img src="img/4.jpg" alt="">
        </div>
    </div>
</div>

style.css

/* Контейнер с ограниченными размерами, он будет выполнять роль "окна" */
.slider-container {
    width: 600px;
    height:600px;
    position: relative;
    overflow: hidden;
}
/* Лента с фото, имеет неограниченную ширину и тип flex, чтобы картинки не переносились */
.slider-track {
    height:600px;
    display: flex;
    transition-duration: .5s;
}
/* Стили для оформления кнопок prev/next */
.arrow {
    width:7px;
    height:7px;
    border-top:#cacaca 3px solid;
    border-right:#cacaca 3px solid;
    position: absolute;
}
.arrow-bg {
    width:30px;
    height:30px;
    background: #fff;
    box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
    border-radius: 50%;
    position: relative;
    opacity: .8;
    cursor: pointer;
}
.arrow-left .arrow {
    transform: rotate(-135deg);
    top:10px;
    left:12px;
}
.arrow-right .arrow {
    transform: rotate(45deg);
    top:10px;
    left:8px;
}
.arrow-left {
    position: absolute;
    top:50%;
    left:10px;
    transform: translateY(-50%);
    z-index: 2;
}
.arrow-right {
    position: absolute;
    top:50%;
    right:10px;
    transform: translateY(-50%);
    z-index: 2;
}

scripts.js — файл с кодом слайдера

$(document).ready(function(){
    let sliderPosition = 0; // начальная позиция дорожки
    const sliderContainer = $('.slider-container');
    const sliderTrack = $('.slider-track');
    const sliderItem = $('.slider-item');
    const sliderItemWidth = sliderItem.width();
    const sliderContainerWidth = sliderContainer.width();
    // ширина дорожки определяется как разница между шириной всех картинок и шириной контейнера
    // разница нужна для того, чтобы прокрутка не проводилась дальше последнего фото
    const sliderTrackWidth = sliderItem.length * sliderItemWidth - sliderContainerWidth; 
    const sliderButtonPrev = $('.arrow-left');
    const sliderButtonNext = $('.arrow-right');

    sliderButtonPrev.on('click', function(){
        sliderPosition += sliderItemWidth; // увеличиваем отступ при нажатии назад

        // поскольку отступ будет всегда отрицательный, нужно сравнивать с нулем, 
        // чтобы исключить пустые прокрутки
        if (sliderPosition > 0) {
            sliderPosition = 0;
        }
        sliderTrack.css('transform', `translateX(${sliderPosition}px`);
        sliderButtons();
    });

    sliderButtonNext.on('click', function(){
        sliderPosition -= sliderItemWidth;

        // так как отступы отрицательные, нужно сравнить с отрицательной длинной дорожки, 
        // чтобы исключить пустые прокрутки
        if (sliderPosition < -sliderTrackWidth) {
            sliderPosition = -sliderTrackWidth;
        }
        sliderTrack.css('transform', `translateX(${sliderPosition}px`);
        sliderButtons();
    });


    // скрываем кнопки prev/next, когда нельзя больше крутить
    const sliderButtons = () => {
        if (sliderPosition == 0) {
            sliderButtonPrev.hide();
        } else {
            sliderButtonPrev.show();
        }
        if (sliderPosition == -sliderTrackWidth) {
            sliderButtonNext.hide();
        } else {
            sliderButtonNext.show();
        }
    };
    sliderButtons();
});

На этом слайдер готов, остались вопросы, задавайте в комментариях и подписывайтесь на youtube-канал, там будет еще много видео по разработке и не только.