Implémentation de la fonction tactile et coulissante de Swiper 4.x basée sur le contenu du terminal mobile-js tutoriel-php.cn

Implémentation de la fonction tactile et coulissante de Swiper 4.x basée sur le contenu du terminal mobile

php中世界最好的语言

Libérer： 2018-05-28 15:46:52

original

2214 Les gens l'ont consulté

Cette fois, je vais vous présenter la mise en œuvre de la fonction tactile et coulissante basée sur le contenu de Swiper 4.x sur le terminal mobile Quelles sont les précautions que Swiper 4. Ce qui suit est un guide pratique. cas, jetons un coup d'oeil.

Swiper est un plug-in d'effets spéciaux coulissants créé uniquement avec javascript pour les terminaux mobiles tels que les téléphones mobiles et les tablettes.

Swiper peut obtenir des effets courants tels que l'image de mise au point de l'écran tactile, la commutation d'onglets sur l'écran tactile, la commutation multi-images sur l'écran tactile, etc.

Swiper est open source, gratuit, stable, facile à utiliser et puissant. C'est un choix important pour créer des sites Web sur terminaux mobiles !

1. Chargez d'abord le plug-in. Les fichiers requis sont les fichiers swiper.min.js et swiper.min.css. Vous pouvez télécharger des fichiers Swiper ou utiliser un 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>

Copier après la connexion

2.Contenu HTML.

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

Copier après la connexion

3. Vous souhaiterez peut-être définir une taille pour Swiper, mais bien sûr non.

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

Copier après la connexion

4. Initialiser Swiper : il est préférable de le placer à côté de la balise

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

Copier après la connexion

S'il ne peut pas être écrit derrière le contenu HTML, il doit à écrire après le chargement de la page. Réinitialiser (non recommandé).

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

Copier après la connexion

Ou comme ça (Jquery et Zepto)

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

Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. choses, veuillez faire attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment créer un environnement de développement webpack+react

Comment créer un environnement de bucket familial React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!