Swiper.js plugin makes it super easy to implement carousel images

Swiper is a sliding special effects plug-in built with pure javascript, designed for mobile terminals such as mobile phones and tablets. It can realize common effects such as touch screen focus image, touch screen Tab switching, touch screen multi-image switching, etc. Super easy to use. Without further ado, let’s go straight to the tutorial

1. First load the plug-in. The files you need are swiper.min.js and swiper.min.css files. You can download the Swiper file or use CDN.

 <!-- Link Swiper-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="external nofollow" >
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

Please do not directly import the files of Swiper Chinese website

x <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>

x <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" rel="external nofollow" />

2. CSS styles

 <style>
    .swiper-container {
    //You can set the width and height here width: 50%;
      height: 50%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    img{
      width:250px;
    }
  </style>

3. HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/000.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/001.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/002.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/003.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/004.jpg" alt=""></div>
    //Add picture</div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

4. JavaScript

<script>
  var swiper = new Swiper('.swiper-container', {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay:
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination:
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation:
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

Rendering

You only need to replace the image and modify the size of the image and the carousel to easily create a great carousel. Isn't it simple?

Supplement: How to use swiper to achieve uniform and seamless rotation

1. Set properties

freeMode:true,

autoplay:

delay:0

}

2. Then modify or overwrite the style

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: linear; /*Previously it was ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

Supplement 2: Pitfalls in swiper.js on mobile devices

step:

1. Rendering calendar: The calendar is developed by myself (note: 1. Get the current date; 2. How many days are there in a month; 3. Leap month; 4. What day of the week is the 1st of each month; ...)

2. Because the project is relatively recent, the swiper.js control is used to achieve the sliding effect;

question:

1. The first thing I encountered was that there was no problem when testing on iOS, including UC, Baidu and other browsers; but there was a problem when testing on Meizu and Huawei phones - I couldn't switch back and forth;

Solution: Considering that it should be a compatibility issue, I looked for the official documentation of swiper.js, because at that time I only referenced swiper.js, but did not introduce swiper.css and swiper.animate.js;

After reintroduction, it was ok and the problem was solved;

<link rel="stylesheet" href="../../styles/library/swiper.min.css" rel="external nofollow" />
<script src="../../scripts/common/swiper-3.3.1.min.js"></script>
<script src="../../scripts/common/swiper.animate.min.js"></script>

2. After importing the required files, I found that there was no problem with the iOS and Android browsers. However, there was a problem in the Android app. The switch back and forth was not smooth. At this time, I also searched on Baidu, but did not find a solution. Finally, I had to read the official documents to check the properties and method solutions:

 // Slideshow - slide left and right and switch var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:false,
    mode: 'horizontal',
    freeMode:false,
    touchRatio:0.5,
    longSwipesRatio:0.1,
    threshold:50,
    followFinger:false,
    observer: true, //When modifying swiper itself or its child elements, automatically initialize swiper
    observeParents: true, //When modifying the parent element of swiper, automatically initialize swiper
    onSlideChangeEnd:function(swiper){ // When the slide ends---the month and date switch synchronously left and right changeMonth();
    }
  });

Note: If you don't understand the properties added during initialization, you can check the official documentation;

Warm reminder: I use swper.js version 3xxx or above, and the differences between each version are quite large!

This is the end of this article about how to use the Swiper.js plug-in to easily implement carousel images. For more information about Swiper.js carousel images, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

js to realize seamless carousel plug-in encapsulation
Detailed explanation of plug-in encapsulation of js carousel
Native JS carousel plug-in
js to implement the complete code of the carousel
Sample code for implementing carousel with native js
js to achieve the effect of supporting mobile phone sliding switch carousel picture example
JS carousel diagram implementation simple code
js to achieve click left and right buttons to play pictures
JS implements left and right seamless carousel code
js native carousel plug-in production

<<: Summary of coalesce() usage tips in MySQL

>>: How to modify the default network segment of Docker0 bridge in Docker