swiper 슬라이드

https://swiperjs.com/ 

Swiper - The Most Modern Mobile Touch Slider

swiper 홈페이지 접속!

 

먼저 swiper의 css와 js를 연결해 주어야한다.

참고로 swiper는 제이쿼리 js 파일이 필요없다. 순수 ECMAScript6로 만들어졌기 때문.

 

cdn 연결

 

css

 

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"><link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

 

js

 

<script src="https://unpkg.com/swiper/js/swiper.js"></script>

<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

 

 

html

 

<div class="swiper-container>

    <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>

    <!-- if we need pagination -->

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

 

    <!-- if we need navigation buttons -->

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

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

 

    <!-- if we need scrollbar -->

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

</div>

 

js 연결

 

var Swiper = new Swiper('.swiper-container',{

    

    //optional parameters

    direction: 'vertical',

    loop: true,

 

    //if we need pagination

    pagination:{

      el: '.swiper-pagination',

    },

 

    //navigation arrows

    navigation:{

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

},

 

    //and if we need scrollbar

    scrollbar:{

      el: '.swiper-scrollbar',

    },

});