2020.04.01

jQueryを使ってカルーセルスライダー(Carousel Slider)を自作してみた

こんにちは、けいすけです。

今回は、カルーセルスライダーを自作したので、共有してみたいと思います。

目次 [表示する]

カルーセルスライダーの実装
1. 完成形
2. カルーセルスライダー実装の考え方

カルーセルスライダーの実装

完成形

完成形となるコードがこちらです。

jQuery

                            
$(function() {
    let counter = 0;
    let sliderWidth = $('.slider-wrapper').innerWidth();
    let listCount = $('.slider-item').length;

    $('.prev-btn').click(function() {
        if ( counter > 0 ) {
            counter--;
            $('.slider').css('margin-left', (-1) * counter * sliderWidth);
            $('.pagination-dot.active').removeClass('active');
            $('.pagination-dot').eq(counter).addClass('active');
        }
    });

    $('.next-btn').click(function() {
        if ( counter < (listCount - 1) ) {
            counter++;
            $('.slider').css('margin-left', (-1) * counter * sliderWidth);
            $('.pagination-dot.active').removeClass('active');
            $('.pagination-dot').eq(counter).addClass('active');
        }
    });

    $('.pagination-dot').click(function() {
        $('.pagination-dot.active').removeClass('active');
        $(this).addClass('active');
        counter = $('.pagination-dot').index(this);
        $('.slider').css('margin-left', (-1) * counter * sliderWidth);
    });
});

HTML

                            
<div class="slider-wrapper">
    <ul class="slider">
        <li class="slider-item">slide01</li>
        <li class="slider-item">slide02</li>
        <li class="slider-item">slide03</li>
        <li class="slider-item">slide04</li>
    </ul>
    <div class="prev-btn"></div>
    <div class="next-btn"></div>
    <div class="pagination">
        <span class="pagination-dot active"></span>
        <span class="pagination-dot"></span>
        <span class="pagination-dot"></span>
        <span class="pagination-dot"></span>
    </div>
</div>

CSS

                            
.slider-wrapper {
    overflow-x: hidden;
    width: 250px;
    margin: 0 auto;
    position: relative;
}
.slider-wrapper .slider {
    display: flex;
    width: calc(100% * 4);
    transition: 0.3s;
}
.slider-wrapper .slider .slider-item {
    height: 160px;
    width: calc(100% / 4);
    background: #461937;
    color: #fff;
    text-align: center;
    padding-top: 70px;
}
.slider-wrapper .prev-btn, .slider-wrapper .next-btn {
    width: 30px;
    height: 30px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
}
.slider-wrapper .prev-btn::after, .slider-wrapper .next-btn::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    top: 50%;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    border-bottom-color: transparent;
    border-right-color: transparent;
    left: 33%;
}
.slider-wrapper .prev-btn:hover, .slider-wrapper .next-btn:hover {
    opacity: 1;
}
.slider-wrapper .prev-btn {
    transform: translateY(-50%);
    left: 0;
}
.slider-wrapper .next-btn {
    transform: translateY(-50%) scaleX(-1);
    right: 0;
}
.slider-wrapper .pagination {
    display: flex;
    width: 100%;
    justify-content: center;
    position: absolute;
    bottom: 8px;
}
.slider-wrapper .pagination .pagination-dot {
    margin: 0 8px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #bbb;
    opacity: 0.7;
    cursor: pointer;
}
.slider-wrapper .pagination .pagination-dot.active {
    background: #4081fc;
    opacity: 1;
}