Utilisation de base du swiper (10)

Dans cette leçon, nous introduisons l'affichage multiligne des pages swiper.

Dans cette leçon, nous introduisons l'imbrication des swiper dans swiper.

La première étape cette fois est un peu différente. Bien que nous ayons encore besoin de créer une page swiper, nous avons un swiper imbriqué dans la diapositive d'une page swiper.

<div class="swiper-container swiper-container-h">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Horizontal Slide 1</div>
            <div class="swiper-slide">
                <div class="swiper-container swiper-container-v">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Vertical Slide 1</div>
                        <div class="swiper-slide">Vertical Slide 2</div>
                        <div class="swiper-slide">Vertical Slide 3</div>
                        <div class="swiper-slide">Vertical Slide 4</div>
                        <div class="swiper-slide">Vertical Slide 5</div>
                    </div>
                    <div class="swiper-pagination swiper-pagination-v"></div>
                </div>
            </div>
            <div class="swiper-slide">Horizontal Slide 3</div>
            <div class="swiper-slide">Horizontal Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-h"></div>
    </div>

Nous pouvons voir que cette fois un nom de classe, swiper-container-h, a été ajouté au conteneur externe de swiper. En fait, nous pouvons choisir ce nom de classe à volonté comme marque. Enregistrez-nous Quelle page de swiper est le conteneur externe de ce conteneur externe ? Nous devons la lier lors de l'initialisation. Ensuite, s'il y a plusieurs pages de swiper, nous devons les initialiser plusieurs fois, et chaque initialisation doit être liée à un swiper différent. en haut du conteneur externe de la page, sinon notre style de page sera foiré. Initialisons-le ci-dessous.

var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });

Comme il y a deux pages swiper, nous les initialisons deux fois respectivement. Ensuite, nous devons définir le style CSS de chaque page swiper et les attributs de chaque page swiper. Notez que les noms des classes de conteneurs externes liées doivent être les mêmes, sinon une page initialisée deux fois entraînera une confusion de style.

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