Table des matières

swiper

Maison

interface Web

js tutoriel

Introduction au plug-in swiper et comment carrousel d'images

PHP中文网

Jun 19, 2017 pm 05:23 PM

swiper 怎么插件简介

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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7333

Tutoriel Java

1627

Tutoriel CakePHP

1351

Tutoriel Laravel

1262

Tutoriel PHP

1209

Afficher plus

Related knowledge

Guide du débutant PyCharm : compréhension complète de l'installation du plug-in ! Feb 25, 2024 pm 11:57 PM

PyCharm est un environnement de développement intégré (IDE) Python puissant et populaire qui fournit une multitude de fonctions et d'outils afin que les développeurs puissent écrire du code plus efficacement. Le mécanisme de plug-in de PyCharm est un outil puissant pour étendre ses fonctions. En installant différents plug-ins, diverses fonctions et fonctionnalités personnalisées peuvent être ajoutées à PyCharm. Par conséquent, il est crucial pour les débutants de PyCharm de comprendre et de maîtriser l’installation de plug-ins. Cet article vous donnera une introduction détaillée à l'installation complète du plug-in PyCharm.

Quel est le répertoire d'installation de l'extension du plug-in Chrome ? Mar 08, 2024 am 08:55 AM

Quel est le répertoire d’installation de l’extension du plug-in Chrome ? Dans des circonstances normales, le répertoire d'installation par défaut des extensions de plug-in Chrome est le suivant : 1. L'emplacement du répertoire d'installation par défaut des plug-ins Chrome dans Windows XP : C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. chrome dans Windows7 Emplacement du répertoire d'installation par défaut du plug-in : C:\Users\username\AppData\Local\Google\Chrome\User

Partagez trois solutions expliquant pourquoi le navigateur Edge ne prend pas en charge ce plug-in Mar 13, 2024 pm 04:34 PM

Lorsque les utilisateurs utilisent le navigateur Edge, ils peuvent ajouter des plug-ins pour répondre davantage à leurs besoins. Mais lors de l'ajout d'un plug-in, cela indique que ce plug-in n'est pas pris en charge. Comment résoudre ce problème ? Aujourd'hui, l'éditeur partagera avec vous trois solutions. Venez l'essayer. Méthode 1 : essayez d’utiliser un autre navigateur. Méthode 2 : Le Flash Player du navigateur peut être obsolète ou manquant, ce qui rend le plug-in non pris en charge. Vous pouvez télécharger la dernière version sur le site officiel. Méthode 3 : Appuyez simultanément sur les touches « Ctrl+Shift+Delete ». Cliquez sur "Effacer les données" et rouvrez le navigateur.

Benchmark de performances Python ORM : comparaison de différents frameworks ORM Mar 18, 2024 am 09:10 AM

Les frameworks de mappage objet-relationnel (ORM) jouent un rôle essentiel dans le développement de Python, ils simplifient l'accès et la gestion des données en créant un pont entre les bases de données objet et relationnelles. Afin d'évaluer les performances de différents frameworks ORM, cet article comparera les frameworks populaires suivants : sqlAlchemyPeeweeDjangoORMPonyORMTortoiseORM Méthode de test Le benchmark utilise une base de données SQLite contenant 1 million d'enregistrements. Le test a effectué les opérations suivantes sur la base de données : Insérer : Insérer 10 000 nouveaux enregistrements dans la table Lire : Lire tous les enregistrements de la table Mettre à jour : Mettre à jour un seul champ pour tous les enregistrements de la table Supprimer : Supprimer tous les enregistrements de la table Chaque opération

Comment distinguer les vraies et fausses boîtes à chaussures de chaussures Nike (maîtrisez une astuce pour les identifier facilement) Sep 02, 2024 pm 04:11 PM

En tant que marque de sport de renommée mondiale, les chaussures Nike ont attiré beaucoup d'attention. Cependant, il existe également un grand nombre de produits contrefaits sur le marché, notamment de fausses boîtes à chaussures Nike. Distinguer les véritables boîtes à chaussures des fausses est crucial pour protéger les droits et les intérêts des consommateurs. Cet article vous fournira quelques méthodes simples et efficaces pour vous aider à faire la distinction entre les vraies et les fausses boîtes à chaussures. 1 : Titre de l'emballage extérieur En observant l'emballage extérieur des boîtes à chaussures Nike, vous pouvez découvrir de nombreuses différences subtiles. Les véritables boîtes à chaussures Nike contiennent généralement des matériaux en papier de haute qualité, doux au toucher et sans odeur âcre évidente. Les polices et les logos des boîtes à chaussures authentiques sont généralement clairs et détaillés, et il n'y a pas de flou ni d'incohérence de couleur. 2 : titre de marquage à chaud du logo. Le logo sur les boîtes à chaussures Nike est généralement imprimé à chaud. La partie de marquage à chaud sur la boîte à chaussures authentique s'affichera.

Application de Python ORM dans les projets Big Data Mar 18, 2024 am 09:19 AM

Le mappage objet-relationnel (ORM) est une technologie de programmation qui permet aux développeurs d'utiliser des langages de programmation objet pour manipuler des bases de données sans écrire directement de requêtes SQL. Les outils ORM en python (tels que SQLAlchemy, Peewee et DjangoORM) simplifient l'interaction avec les bases de données pour les projets Big Data. Avantages Simplicité du code : ORM élimine le besoin d'écrire de longues requêtes SQL, ce qui améliore la simplicité et la lisibilité du code. Abstraction des données : ORM fournit une couche d'abstraction qui isole le code de l'application des détails d'implémentation de la base de données, améliorant ainsi la flexibilité. Optimisation des performances : les ORM utilisent souvent la mise en cache et les opérations par lots pour optimiser les requêtes de base de données, améliorant ainsi les performances. Portabilité : ORM permet aux développeurs de

Comment gérer les messages d'erreur lorsque l'installation du plug-in WordPress échoue ? Mar 04, 2024 pm 04:57 PM

Comment gérer les messages d’erreur lorsque l’installation du plug-in WordPress échoue ? En tant que l’un des systèmes de gestion de contenu les plus populaires actuellement, WordPress dispose d’une riche bibliothèque de plug-ins, offrant aux utilisateurs diverses extensions fonctionnelles et options de personnalisation. Cependant, lors de l’utilisation de WordPress, l’installation du plug-in échoue parfois et des messages d’erreur peuvent apparaître, rendant les utilisateurs confus et anxieux. Cet article présentera quelques messages d’erreur courants d’échec d’installation du plug-in WordPress et comment résoudre ces problèmes. 1. Rapport

Comment afficher et modifier des fichiers SQL Feb 26, 2024 pm 05:12 PM

Un fichier SQL est un fichier texte qui contient généralement une série d'instructions SQL. Pour ouvrir un fichier SQL, vous pouvez utiliser un éditeur de texte ou un outil de développement SQL spécialisé. Le moyen le plus simple d'ouvrir un fichier SQL consiste à utiliser un éditeur de texte, tel que Notepad ou Notepad++ sous Windows, ou Text Editor sous Mac. Voici les étapes pour ouvrir un fichier SQL : Tout d'abord, recherchez le fichier SQL que vous souhaitez ouvrir, cliquez avec le bouton droit sur le fichier et sélectionnez « Ouvrir avec ». dans la fenêtre pop-up

See all articles