스와이프의 기본 사용법 (10)

이 강의에서는 스와이프 페이지의 여러 줄 표시를 소개합니다.

이 강의에서는 swiper의 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>

이번에는 swiper-container-h라는 클래스 이름이 swiper의 외부 컨테이너에 추가된 것을 볼 수 있습니다. 실제로 이 클래스 이름 중 하나를 선택하여 기록할 수 있습니다. external 어떤 스와이퍼 페이지가 컨테이너의 외부 컨테이너입니까? 그러면 초기화 중에 바인딩해야 합니다. 그런 다음 스와이퍼 페이지가 여러 번 있으면 이를 여러 번 초기화해야 하며 각 초기화는 다른 스와이퍼 페이지에 바인딩되어야 합니다. 그렇지 않으면 페이지 스타일이 엉망이 될 것입니다. 아래에서 초기화해 보겠습니다.

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

스와이퍼 페이지가 두 개이므로 각각 두 번 초기화합니다. 그런 다음 각 스와이프 페이지의 CSS 스타일과 각 스와이프 페이지의 속성을 설정해야 합니다. 바인딩된 외부 컨테이너 클래스 이름은 동일해야 합니다. 그렇지 않으면 두 번 초기화된 페이지로 인해 스타일 혼란이 발생합니다.

위는 swiper(10)의 기본 사용법입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!