スライダー（ナビゲーション・ページネーション）

デモ

See the Pen slider1 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'>

     <section class="section">

          <div class="swiper-container">
               <div class="swiper">
                    <div class="swiper-wrapper">
                         <div class="swiper-slide">Slide 1</div>
                         <div class="swiper-slide">Slide 2</div>
                         <div class="swiper-slide">Slide 3</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>


     </section>
     <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;
}

.section {
     width: var(--max-width);
     height: 100vh;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     /* background: #ccc; */
}

/* swiper */

.swiper-container {
     position: relative;
     padding: 0 5rem 5rem 5rem;
     max-width: 600px;
     margin:0 auto;
}

.swiper {
     width: 100%;
     max-width: 600px;
     height: 300px;
     background: #fff;
}

.swiper-slide {
     width: 100%;
     height: 100%;
     background: rgb(214, 164, 164);
}

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

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


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

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

/* scroll */
.swiper-scrollbar {
     background: #ccc !important;
}

.swiper-scrollbar-drag {
     background: rgb(172, 245, 255) !important;
}

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>';
        },
    },

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

    scrollbar: {
        // el: '.swiper-scrollbar',
      // dragSize: 100,
        // draggable: true,
    },
});