swiper

Swiper est un plug-in d'effets spéciaux coulissants créé uniquement avec JavaScript, ciblant les téléphones mobiles, tablettes et autres terminaux mobiles.

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, simple à utiliser et puissant. C'est un choix important pour créer des sites Web sur terminaux mobiles !

1. Créez d'abord un environnement d'exploitation swiper. Les fichiers requis sont les fichiers swiper.min.js et swiper.min.css.

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

Copier après la connexion

　　<script src="path/to/swiper.min.js?1.1.10"></script>

Copier après la connexion

</html>

Copier après la connexion

2. Écrivez du contenu HTML.

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">Slide 1</div>
　　　　<div class="swiper-slide">Slide 2</div>
　　　　<div class="swiper-slide">Slide 3</div>
　　</div>

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

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 : de préférence à côté de la balise (appel de fonction)

<script>

Copier après la connexion

　var swiper= new Swiper('.swiper-container',{
　　autoplay:1000,//Carrousel automatique
　　autoplayDisableOnInteraction:false,//Continuer le défilement après le glissement
　　loop:true,///Loop
　　pagination : '.swiper-pagination',//pagination
　　paginationClickable:true,//petit clic sur un point
　　espaceEntre:30,///espace entre les images
　　direction:"horizontal"//vertical horizontal par défaut
})

</script>
</body>

Copier après la connexion

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!