Utilisation de base du swiper (5)

Cette section explique comment afficher les pages swiper en groupes.
Parfois, l'affichage d'une seule page sur un écran ne peut pas répondre à nos besoins de développement. Swiper propose une méthode d'affichage d'un groupe de pages sur un seul écran. Il vous suffit d'ajouter un attribut à l'initialisation de la page swiper.

La première étape consiste à rédiger une page swiper de base.

<div class="swiper-wrapper">
                <div class="swiper-slide">第一页</div>
                <div class="swiper-slide">第二页</div>
                <div class="swiper-slide">第三页</div>
                <div class="swiper-slide">第四页</div>
                <div class="swiper-slide">第五页</div>
                <div class="swiper-slide">第六页</div>
                <div class="swiper-slide">第七页</div>
                <div class="swiper-slide">第八页</div>
                <div class="swiper-slide">第九页</div>
                <div class="swiper-slide">第十页</div>
            </div>
        </div>

Initialisez ensuite la page en js et ajoutez des attributs pour un meilleur effet de visualisation.
Nous avons ajouté un espace de diapositive à la page.

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                slidesPerView:3,   //页面分组显示，这里显示为3组
                spaceBetween:30   //slide间隙
            });
        </script>

Bien sûr, n'oubliez pas de citer notre fichier cadre, ainsi lorsque vous exécutez notre page, vous constaterez qu'un groupe de nos pages sera affiché sur l'écran actuel.

Ce qui précède est l'utilisation de base de swiper (5). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Étiquettes associées：

swiper

source：php.cn

Article précédent：Utilisation de base du swiper (4) Article suivant：Utilisation de base du swiper (6)

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

Derniers articles par auteur

• Matériel vidéo sur la création de votre propre framework PHP à partir de zéro
  2023-03-15 16:54:01
• Exemple d'analyse de la façon dont PHPMailer utilise la boîte aux lettres QQ pour compléter la fonction d'envoi d'e-mails
  2023-03-15 12:26:02
• Introduction à la façon de recevoir des e-mails en IMAP en php
  2023-03-14 18:58:01
• Exemple de mise en œuvre rapide de la déduplication de tableau en PHP
  2023-03-14 11:30:01
• Résumé de l'utilisation de tous les attributs de la balise en html
  1970-01-01 08:00:00
• Résumé des connaissances de base de PHP (nécessaire aux débutants pour débuter)
  2023-03-16 15:20:01
• Introduction à l'utilisation de typeof en JavaScript
  1970-01-01 08:00:00
• Introduction à l'utilisation de la méthode confirm() en JavaScript
  1970-01-01 08:00:00
• Une introduction détaillée à l'attribut HTML5 Placeholder
  1970-01-01 08:00:00
• Comment implémenter la sélection unique, la sélection multiple et la sélection inversée dans les formulaires dans ReactJS
  1970-01-01 08:00:00

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

3

2324

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

11

2457

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

2074

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1958

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

2027

Rubriques connexes

Plus>

• Qu'est-ce qu'un concepteur d'interface utilisateur ?
• Pourquoi ne puis-je pas accéder au navigateur Ethereum ?
• Comment résoudre les problèmes lors de l'analyse des packages
• Le rôle de la fonction de validation
• Liste de prix du niveau Douyin 1-75
• utilisation de la fonction createmutex
• Raisons pour lesquelles le ping échoue
• Qu'est-ce qu'un hôte