Basic use of swiper

What is swiper?

swiper is a lightweight carousel chart plug-in that not only supports PC but is also designed for mobile devices. You can use it to quickly create a carousel chart, or expand it to make complex ones. carousel effect.

Basic usage

Swiper requires two files, one is swiper.css, which specifies some commonly used styles in this sliding carousel plug-in. Of course, you can define it yourself if you want. Style
The other one is swiper.js, which is the main part of the plug-in.
After introducing these two files into the page, you must first write the basic html structure
All the following usage methods are based on swiper 4.x

  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
      <p class="swiper-slide">Slide 4</p>
      <p class="swiper-slide">Slide 5</p>
      <p class="swiper-slide">Slide 6</p>
      <p class="swiper-slide">Slide 7</p>
      <p class="swiper-slide">Slide 8</p>
      <p class="swiper-slide">Slide 9</p>
      <p class="swiper-slide">Slide 10</p>
    </p>
  </p>

The class name is swiper-container, which is a sliding carousel plug-in A wrapper is similar to a mask or a window. The swiper-wrapper is a collection of all carousel images arranged in a certain order. By default, they are arranged left and right. When the mouse or touch screen is operated, this is what changes. The position of the element to achieve the effect of carousel. swiper-slide is each carousel image element. After writing the basic html structure, you need to initialize the carousel image

<script>
    var swiper = new Swiper(&#39;.swiper-container&#39;);</script>

In this way, a default carousel image can be generated. You can use the mouse or Touch the screen to slide left and right

Add paging and navigation

Most carousels have pagination and navigation, which allow users to see where they are currently and let them know where they are. It is an interactive part. The way to add paging is also very simple. You only need to add the option to specify the paging element during initialization.
In the html part, add the next and previous buttons under the swiper-container

    <p class="swiper-container">
        <p class="swiper-wrapper">...</p>
          <p class="swiper-button-next"></p>
          <p class="swiper-button-prev"></p>
    </p>

Here swiper-button-next and swiper-button-prev are both designated buttons. The next button will be vertically centered and to the right, and the previous button will be vertically centered and to the right. Of course, you can also specify the button yourself.

    var swiper = new Swiper('.swiper-container',{
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });

Add button elements in the initialization function.
This will generate a carousel with navigation buttons

The way to add pagination is very similar to the navigation button
html:

  <p class="swiper-container">
    <p class="swiper-wrapper">
        ...    </p>
    <!-- 分页 -->
    <p class="swiper-pagination"></p>
    <!--导航按钮-->
    <p class="swiper-button-next"></p>
    <p class="swiper-button-prev"></p>
  </p>

Add paging elements during initialization
js:

    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
      navigation:{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });

This way you can generate a carousel with pagination and navigation

Looping and automatic carousel:

js:
Add

   var swiper = new Swiper('.swiper-container', {       //分页
       pagination: {
           el: '.swiper-pagination',
       },       //导航按钮
       navigation:{
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       },       //自动轮播
       autoplay: {
           delay: 2500,//时间 毫秒
           disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
       },
   });

Other commonly used attributes during initialization

1. Pagination progress Article instead

   var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',            type: 'progressbar',//将分页的类型改为进度条就行
        },
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });

This article explains the basic use of swiper. For more related content, please pay attention to the PHP Chinese website.

Related recommendations:

Simple PHP MySQL paging class

Two tree array constructors without recursion

Convert HTML to Excel, and realize printing and downloading functions

The above is the detailed content of Basic use of swiper. For more information, please follow other related articles on the PHP Chinese website!