Home >Web Front-end >JS Tutorial >Implementation of Swiper 4.x's touch and slide function based on content on the mobile terminal

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

php中世界最好的语言Original: 2018-05-28 15:46:522256browse

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>

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之外

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

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

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>

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>

Or like this (Jquery and Zepto)

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</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!

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

Related articles