마카로닉스

2076 No

swiperjs 슬라이더 기본 사용법 알아보기

2023-03-16 11:52:01 By 라이트 0 368 댓글수 4 삭제 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- swiper CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <!-- swiper jQuery -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  </head>
  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide" id="swiper-slide-1">
          <a href="/contents/guide_book/page/fishing">
            <img
              src="https://cdn.jsdelivr.net/gh/braverokmc79/lineage-choco@v1.0.2/resources/web/choco/wp-content/uploads/2022/09/img_01.jpg"
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="/contents/guide_book/page/cooking">
            <img
              src="https://cdn.jsdelivr.net/gh/braverokmc79/lineage-choco@v1.0.2/resources/web/choco/wp-content/uploads/2022/09/img_02.jpg"
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="/contents/guide_book/page/weapon">
            <img
              src="https://cdn.jsdelivr.net/gh/braverokmc79/lineage-choco@v1.0.2/resources/web/choco/wp-content/uploads/2022/09/img_03.jpg"
            />
          </a>
        </div>

        <div class="swiper-slide">
          <a href="/contents/guide_book/page/fishing">
            <img
              src="https://cdn.jsdelivr.net/gh/braverokmc79/lineage-choco@v1.0.2/resources/web/choco/wp-content/uploads/2022/09/img_01.jpg"
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="/contents/guide_book/page/cooking">
            <img
              src="https://cdn.jsdelivr.net/gh/braverokmc79/lineage-choco@v1.0.2/resources/web/choco/wp-content/uploads/2022/09/img_02.jpg"
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="/contents/guide_book/page/weapon">
            <img
              src="https://cdn.jsdelivr.net/gh/braverokmc79/lineage-choco@v1.0.2/resources/web/choco/wp-content/uploads/2022/09/img_03.jpg"
            />
          </a>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

    <script>
      const swiper1 = new Swiper(".mySwiper1", {
        //기본 셋팅
        //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
        direction: "horizontal",
        //한번에 보여지는 페이지 숫자
        slidesPerView: 3,
        //페이지와 페이지 사이의 간격
        spaceBetween: 0,
        //드레그 기능 true 사용가능 false 사용불가
        debugger: true,
        //마우스 휠기능 true 사용가능 false 사용불가
        mousewheel: true,
        //반복 기능 true 사용가능 false 사용불가
        loop: true,
        //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
        centeredSlides: true,
        // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
        // effect: 'fade',
        speed: 1000,
        //자동 스크를링
        autoplay: {
          //시간 1000 이 1초
          delay: 2500,
          disableOnInteraction: false,
        },
        //페이징
        pagination: {
          //페이지 기능
          el: ".swiper-pagination",
          //클릭 가능여부
          clickable: true,
        },

        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>