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

이 섹션에서는 스위퍼 페이지를 그룹으로 표시하는 방법을 설명합니다.
때때로 한 화면에 한 페이지만 표시하는 것이 우리의 개발 요구 사항을 충족할 수 없는 경우가 있습니다. Swiper 패키지에는 한 화면에 여러 페이지를 표시하는 방법이 있습니다. Swiper 페이지 초기화에 속성만 추가하면 됩니다.

첫 번째 단계는 기본 스와이퍼 페이지를 작성하는 것입니다. & lt; div class = "swiper-container" & gt;

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

그런 다음 효과를 더 잘 보기 위해 JS에서 페이지에 속성을 초기화하고 추가합니다.
페이지에 슬라이드 간격을 추가했습니다.

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

물론 프레임워크 파일을 인용하는 것을 잊지 마세요. 따라서 페이지를 실행하면 페이지 그룹이 현재 화면에 표시되는 것을 볼 수 있습니다.

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