Basic usage of Swiper

   This article summarizes the basic usage of the Swiper plugin

   Mainly divided into 3 steps: ①Introduce files; ②Build page structure; ③Initialize and activate Swiper

   Then Swiper can perform a simple switch

Let's introduce them in turn:
(1) Import files

      The required files are swiper.min.js and swiper.min.css files, you can download the Swiper file or use CDN

<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/swiper.min.js"></script>

    If you need to use jQuery, you can import it before swiper.min.js

<script src="./js/jquery.min.js"></script>

 

(2) Build the page structure

    composition:

    ①swiper-container container; ②swiper-wrapper packaging; ③swiper-slide sliding; ④swiper-pagination paging;

    ⑤swiper-button-prev and swiper-button-prev (up and down page buttons); ⑥swiper-scrollbar scroll bar;

<style type="text/css">
   .swiper-container {/*custom swiper size*/
       width: 600px;
       height: 300px;
   }  
</style>
<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 a pager is required -->
    <div class="swiper-pagination"></div>
    <!-- Navigation buttons if needed -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- If scrollbars are required -->
    <div class="swiper-scrollbar"></div>
</div>
<!--Navigation and other components can be placed outside the container-->

 

 (3) Initialize and activate Swiper

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    // if a pager is required
    pagination: {
      el: '.swiper-pagination',
    },
    // If you need forward and back buttons
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // if scrollbar is required
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>

   If it cannot be written after the HTML content, it needs to be initialized after the page is loaded.

<script type="text/javascript">
   window.onload = function() {
        ...
   }
</script>

   or like this (Jquery and Zepto)

<script type="text/javascript">
   $(document).ready(function () {
       ...
   })
</script>

 

 

 

 

 

 

 

 

.