Implementation of Swiper 4.x's touch and slide function based on content on the mobile terminal-JS Tutorial-php.cn

Implementation of Swiper 4.x's touch and slide function based on content on the mobile terminal

php中世界最好的语言

Release： 2018-05-28 15:46:52

Original

2243 people have browsed it

This time I will bring you the implementation of the touch and slide function based on the content in Swiper 4.x on the mobile terminal. What are the precautions for Swiper 4. The following is a practical case, let’s take a look.

Swiper is a sliding special effects plug-in created purely with javascript, targeting mobile phones, tablets and other mobile terminals.

Swiper can achieve common effects such as touch screen focus image, touch screen Tab switching, touch screen multi-image switching, etc.

Swiper is open source, free, stable, simple to use, and powerful. It is an important choice for building mobile terminal websites!

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

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" >
</head>
<body>
  ...
  <script src="path/to/swiper.min.js"></script>
</body>
</html>

Copy after login

2.HTML content.

<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>
  <!-- 如果需要分页器 -->
  <p class="swiper-pagination"></p>
  
  <!-- 如果需要导航按钮 -->
  <p class="swiper-button-prev"></p>
  <p class="swiper-button-next"></p>
  
  <!-- 如果需要滚动条 -->
  <p class="swiper-scrollbar"></p>
</p>
导航等组件可以放在container之外

Copy after login

3. You may want to define a size for Swiper, but of course not.

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

Copy after login

4. Initialize Swiper: It is best to place it next to the tag

<script>    
 var mySwiper = new Swiper ('.swiper-container', {
  direction: 'vertical',
  loop: true,
  
  // 如果需要分页器
  pagination: {
   el: '.swiper-pagination',
  },
  
  // 如果需要前进后退按钮
  navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
  },
  
  // 如果需要滚动条
  scrollbar: {
   el: '.swiper-scrollbar',
  },
 })    
 </script>
</body>

Copy after login

If it cannot be written behind the HTML content, it needs to be initialized after the page is loaded (not recommend).

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

Copy after login

Or like this (Jquery and Zepto)

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

Copy after login

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!