Home >Web Front-end >JS Tutorial >How to implement automatic unlimited picture rotation with swiper

How to implement automatic unlimited picture rotation with swiper

php中世界最好的语言Original: 2018-05-28 14:13:266532browse

This time I will show you how to implement unlimited automatic picture rotation in swiper. What are the precautions to realize unlimited automatic picture rotation in swiper? The following is a practical case, let's take a look.

Complete code

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nofollow" >
 <script src="swiper/js/swiper-3.4.2.min.js"></script>
 <style type="text/css">
  
  .swiper-container {
   width: 900px;
   height: 300px;
  }
 </style>
</head>
<body>
<p class="swiper-container">
 <p class="swiper-wrapper">
  <p class="swiper-slide box1"><img src="img/a.jpg"></p>
  <p class="swiper-slide box2" ><img src="img/b.jpg"></p>
  <p class="swiper-slide box3"><img src="img/c.jpg"></p>
 </p>
 <!-- 如果需要分页器 -->
 <p class="swiper-pagination"></p>
 <!-- 如果需要导航按钮 -->
 <p class="swiper-button-prev"></p>
 <p class="swiper-button-next"></p>
 <!-- 如果需要滚动条 -->
  <!--<p class="swiper-scrollbar"></p>-->
</p>
</p>
<script>
 var mySwiper = new Swiper ('.swiper-container', {
  direction: 'horizontal',
  loop: true,
  // 如果需要分页器
  pagination: '.swiper-pagination',
  // 如果需要前进后退按钮
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  autoplay : 1000,
  speed:100,
  // 如果需要滚动条
//   scrollbar: '.swiper-scrollbar',
  effect : 'coverflow',
  slidesPerView: 3,
  centeredSlides: true,
  coverflow: {
   rotate: 30,
   stretch: 10,
   depth: 60,
   modifier: 2,
   slideShadows : true
  }
 })
</script>
</body>
</html>

How to use swiper to write carousels

Everyone has written carousel pictures before, I believe you are writing carousel pictures I’ve probably been troubled by some of the details during the process. Next, I’ll tell you about a convenient and quick carousel chart!

Swiper is often used for content touch sliding on mobile websites

1. The first step is to introduce the css---swiper.css plug-in and JQ---swiper.js plug-in,

Then I started writing the carousel image

<p class="swiper-container">--首先定义一个容器
   <p class="swiper-wrapper">
    <p class="swiper-slide"><img src="" /></p> --添加图片
    <p class="swiper-slide"><img src="" /></p>
    <p class="swiper-slide"><img src="" /></p>
   </p>
   <p class="swiper-pagination"></p>--小圆点分页器
   <p class="swiper-button-prev"></p>--上一页
   <p class="swiper-button-next"></p>--下一页
  </p>

If you want it to move, then continue writing js

var mySwiper = new Swiper(".swiper-container",{
     autoplay:1000,--每秒中轮播一次
     loop:true,--可以让图片循环轮播
     autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播
     pagination:".swiper-pagination",--让小圆点显示
     paginationClickable:true,--实现小圆点点击
     prevButton:".swiper-button-prev",--实现上一页的点击
     nextButton:".swiper-button-next",--实现下一页的点击
　　　　　　　　　　　　effect:"flip"--可以实现3D效果的轮播
    })

Swiper carousel also has its advantages:

　1.Swiper is a sliding special effects plug-in created purely with

javascript, which is oriented to mobile terminals such as mobile phones and tablets. 　 2.Swiper can achieve common effects such as touch screen focus image, touch screen Tab switching, touch screen multi-image switching, etc.
　3.Swiper is open source, free, stable, simple to use, and powerful. It is an important choice for building mobile terminal websites!

There are also shortcomings: (When using the Swiper carousel plug-in ajax request to load images, the problem cannot be slid)

Because the banner image is dynamically created, when the plug-in starts to initialize, there is no such thing in the document flow. Images are used, so the corresponding width is not created. By adjusting the js loading order, the problem is still not solved.
Finally found the swiper plug-in api, which has attributes that can be changed according to the content and automatically
initialize the plug-in. After adding observer: true, the problem is solved!

var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})

Swiper has rich API interfaces. (But there are not many Chinese documents, so I couldn’t find them.) It allows developers to generate their own unique pagination, up and down slider buttons

, and four

callback functions : 1.onTouchStart 2.onTouchMove
3.ontouchend
4.onslideswitch.
The above content is my personal summary, I hope it will be helpful to you!

swiper carousel chart (reverse automatic switching is similar to an infinite loop)

swiper plug-in carousel chart. The default carousel sequence is from right to left. One picture, the second picture, the third picture, and then you can see with the naked eye that you rewind from the third picture from left to right to the first picture. This will make the visual experience not high,

, but it can still be used. The characteristics of swiper itself are changed to an infinite loop carousel.

HTML code

<p class="course-banner-box">
  <p class="swiper-container">
    <p class="swiper-wrapper"> <!--四张轮播图-->
      <p class="swiper-slide slide1"></p>
      <p class="swiper-slide slide2"></p>
      <p class="swiper-slide slide3"></p>
      <p class="swiper-slide slide4"></p>
    </p>
    <!-- Add Pagination -->
    <p class="swiper-pagination"></p>
    <!-- Add Arrows -->
    <p class="button-box">
      <p class="button"> <!--左右按钮-->
        <p class="swiper-button-next"></p>
        <p class="swiper-button-prev"></p>
      </p>
    </p>
  </p>
</p>

script code

<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',//pagination分页器
    nextButton: '.swiper-button-next',//前进后退按钮
    prevButton: '.swiper-button-prev',
    paginationClickable: true,//参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
    spaceBetween: 30,//slide之间的距离（单位px）。
    centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
    loop : true,//复制多份循环(这里就是让轮播看起来是循环的，去掉这个就恢复了默认的swiper轮播)
    autoplay: 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
    autoplayDisableOnInteraction: false//点击后打断auto-play
  });
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to implement automatic unlimited picture rotation with swiper

Related articles