26강 - 반응형 스와이퍼

HTML code 보기

<!-- 테일윈드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<section class="section section-1">
    <div class="container mx-auto">
        <div class="swiper-box-1">
             <div class="swiper mySwiper">
    <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>             
    <div class="swiper-scrollbar">
        
    </div>
  </div>
        </div>
    </div>
</section>

   

CSS code 보기

css code

.section-1 {
padding-left : 50px;
padding-right: 50px;
overflow : hidden;
}
.swiper-box-1 .swiper-slide {
height: 500px;
background-color: green;
}
.swiper-box-1 .swiper {
overflow : visible;
}

#### JS code 보기
>```js
 var swiper = new Swiper(".mySwiper", {
     loop: true,
     spaceBetween: 20,
      scrollbar: {
        el: ".swiper-scrollbar",
        hide: true,
      },
    });

>```JS    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
        type: "fraction",
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
        breakpoints: {
            0: {
                slidesPerView: 1
            },
            768: {
                slidesPerView: 2
            },
            1024: {
                slidesPerView: 3
            },
            1280: {
                slidesPerView: 4
            },
            1536: {
                slidesPerView: 5
            },
        }
    });

✅ loop: true, 슬라이드가 끝났을 때 다시 처음으로 간다.
✅ loop: true, spacebetween 적용되지 않음.

• codepen에 정리된 코드 보러가기