Basic use of swiper (10)

In this lesson we introduce the multi-line display of swiper pages.

In this lesson we introduce swiper nesting in swiper.

The first step this time is a little different. Although we still need to build a swiper page, we have a swiper nested in the slide of a swiper page.

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

We can see that this time a class name, swiper-container-h, has been added to the external container of swiper. In fact, we can choose this class name at will as a mark to record our external container. Which swiper page is the external container of the container? We need to bind it during initialization. Then if there are several swiper pages, we need to initialize them several times, and each initialization must be bound to a different swiper page. On top of the external container, otherwise our page style will be messed up. Let’s initialize it below.

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

Because there are two swiper pages here, they are initialized twice respectively, and then the CSS style of each swiper page and the attributes of each swiper page must be set separately. Note that the bound external container class names must be the same, otherwise a page initialized twice will cause style confusion.

The above is the basic use of swiper (10). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!