スライダー（ギャラリー）

デモ

See the Pen slider3 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 slider">
                    <div class="swiper-wrapper">
                         <div class="swiper-slide"><img src="https://placehold.jp/d1854e/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/4ed173/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/d14eb3/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/4e59d1/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/d14e73/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/854ed1/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/a1d14e/ffffff/600x350.png" alt=""></div>
                    </div>
               </div>

               <div class="swiper-button-prev">
               </div>
               <div class="swiper-button-next">
               </div>


               <div thumbsSlider="" class="swiper thumbnail">
                    <div class="swiper-wrapper">
                         <div class="swiper-slide"><img src="https://placehold.jp/d1854e/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/4ed173/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/d14eb3/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/4e59d1/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/d14e73/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/854ed1/ffffff/600x350.png" alt=""></div>
                         <div class="swiper-slide"><img src="https://placehold.jp/a1d14e/ffffff/600x350.png" alt=""></div>
                    </div>
               </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: 100%;
     max-width: var(--max-width);
     height: 100vh;
     margin: 0 auto;
     background: #ccc; */
}

/* swiper */
.swiper-container {
     position: relative;
     margin: 0 auto;
     width: 600px;
     padding: 0 50px;
}

.swiper {
     width: 100%;
}

.swiper-wrapper {
     width: 100%;
     margin-top: 2rem !important;
     display: flex;
     align-items: center;
}

.swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

/* thumbnail */
.thumbnail .swiper-wrapper {
     width: 100%;
     margin-top: 2rem !important;
     display: flex;
     align-items: center;
}

.thumbnail .swiper-slide {
     opacity: .4;
}

.swiper-slide-thumb-active {
     opacity: 1 !important;
}

var thumbnail = new Swiper(".thumbnail", {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
    watchSlidesVisibility: true,
    loop: true,
});

var swiper = new Swiper('.slider', {
   
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    spaceBetween: 10,

    thumbs: {
        swiper: thumbnail,
    }
});