jQuery Swiper 教學

<!-- Import jquery & swiper -->
<script src="jquery-3.4.1.min.js"></script>
<script src="swiper-bundle.min.js"></script>
<link rel="stylesheet" href="swiper-bundle.min.css">

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <!-- Slide1 -->
                <img src="1.png" alt="slide 1 image">
            </div>

            <div class="swiper-slide">
                <!-- Slide2 -->
                <img src="2.png" alt="slide 2 image">
            </div>
            <div class="swiper-slide">
                <!-- Slide3 -->
                <img src="3.png" alt="slide 3 image">
            </div>
            <div class="swiper-slide">
                <!-- Slide4 -->
                <img src="4.png" alt="slide 4 image">
            </div>

            <div class="swiper-slide">
                <!-- Slide5 -->
                <img src="5.png" alt="slide 5 image">
            </div>

            <div class="swiper-slide">
                <!-- Slide6 -->
                <img src="6.png" alt="slide 6 image">
            </div>
        </div>

        <!-- If need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If need scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>

<style>
  .swiper-container {
      width: 600px;
      height: 300px;
  }

  img {
      width: auto;
      height: 100%;
  }
</style>

$(function () {

    const swiper = new Swiper('.swiper-container', {
        //Optional parameters
        direction: 'horizontal', //vertical
        loop: true,
        slidesPerView:2, 
        autoplay:true,
        effect: 'fade', //slide,coverflow.....
        //If need pagination
        pagination: {
            el: '.swiper-pagination'
        },

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

        //If need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar'
        }
    });

});