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

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

php中世界最好的语言original: 2018-05-28 15:46:522137parcourir

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>

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

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

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

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>

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>

Ou comme ça (Jquery et Zepto)

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter la liaison bidirectionnelle des données VueArticle suivant：Comment implémenter la liaison bidirectionnelle des données Vue

Articles Liés

Voir plus