スライダー（レスポンシブ）

デモ

See the Pen slider2 by logsuke (@design-list) on CodePen.

コード

<!-- swiper head内 -->
          <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
          <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
          <div class="swiper-container">
               <div class="swiper">
                    <div class="swiper-wrapper">
                         <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/150x50.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/150x50.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/150x50.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/150x50.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/150x50.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/150x50.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/3d4070/ffffff/150x50.png" alt=""></div>
                    </div>
               </div>
               <div class="swiper-button-prev">
                    <i class='bx bx-chevrons-left'></i>
               </div>
               <div class="swiper-button-next">
                    <i class='bx bx-chevrons-right'></i>
               </div>

               <div class="swiper-scrollbar"></div>

               <div class="swiper-pagination"></div>
          </div>
     <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

/*=== Base ===*/

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box
}

:root {
     --nav-height: 8rem;
     --max-width: 1024px;
     --container-padding: 0 4rem;
     --gap: 2rem;
     --bg-color: rgb(240, 240, 240);
     --first-color: rgb(172, 245, 255);
}


/*=== Font ratio ===*/

html {
     scroll-behavior: smooth;
     font-size: 62.5%;
}

body {
     font-size: 1.6rem;
}

ul {
     list-style: none;
}

a {
     text-decoration: none;
}

/* swiper */
.swiper-container {
  
     position: relative;
     padding: 0 5rem 5rem 5rem;
     max-width: var(--max-width);
     margin:0 auto;
  margin-top: 100px;
}

.swiper {
     width: 100%;
     max-width: var(--max-width);
     height: 100%;
}

.swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
}

.swiper-pagination-bullet {
     margin: 0 .5rem !important;
     width: 40px !important;
     height: 24px !important;
     border-radius: 0!important;
     line-height: 24px !important;
     text-align: center !important;
     color: #000 !important;
     opacity: 1 !important;
     background: #ccc !important;
}

.swiper-pagination-bullet-active {
     background: blue !important;
     color: #fff !important;
}


/* navigation */
.swiper-button-prev::after, .swiper-button-next::after {
     content: '' !important;
}

.swiper-button-prev i, .swiper-button-next i {
     color: blue;
     transform: translateY(-25px);
     font-size: 40px;
}

const swiper = new Swiper('.swiper', {
    // direction: 'vertical',
    direction: 'horizontal',
    loop: true,

    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        // type: 'bullets',
        // type: 'fraction',
        // type: 'progressbar',
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
    },

    // autoplay: {
    //     delay: 1000,
    //     disableOnInteraction: false,
    //     reverseDirection: false,
    //   },

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    slidesPerView: 1,
    spaceBetween: 10,
    breakpoints: {
        420: {
            slidesPerView: 2,
            spaceBetween: 20
        },
        580: {
            slidesPerView: 3,
            spaceBetween: 30
        },
        700: {
            slidesPerView: 4,
            spaceBetween: 40
        },
        820: {
            slidesPerView: 5,
            spaceBetween:50
        }
    },

});