Grundlegende Verwendung von Swiper (10)

In dieser Lektion stellen wir die mehrzeilige Anzeige von Swiper-Seiten vor.

In dieser Lektion stellen wir die Swiper-Verschachtelung in Swiper vor.

Der erste Schritt ist dieses Mal etwas anders. Obwohl wir noch eine Swiper-Seite erstellen müssen, haben wir einen Swiper in der Folie einer Swiper-Seite verschachtelt.

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

Wir können sehen, dass dieses Mal ein Klassenname, Swiper-Container-h, zum externen Container von Swiper hinzugefügt wurde. Tatsächlich können wir diesen Klassennamen nach Belieben als Markierung wählen Zeichnen Sie uns auf: Welche Swiper-Seite ist der externe Container? Wir müssen ihn während der Initialisierung binden. Wenn es dann mehrere Swiper-Seiten gibt, müssen wir sie mehrmals initialisieren, und jede Initialisierung muss an einen anderen Swiper gebunden werden oben im externen Container der Seite, sonst wird unser Seitenstil durcheinander gebracht. Lassen Sie uns ihn unten initialisieren.

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
    });

Da es zwei Swiper-Seiten gibt, initialisieren wir sie jeweils zweimal. Anschließend müssen wir den CSS-Stil jeder Swiper-Seite und die Attribute jeder Swiper-Seite festlegen. Beachten Sie, dass die Namen der gebundenen externen Containerklassen identisch sein müssen, da sonst eine zweimal initialisierte Seite zu Stilverwechslungen führt.

Das Obige ist die grundlegende Verwendung von Swiper (10). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!