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

이번 강의에서는 스와이프 페이지의 자동 그룹화 + 콘텐츠 중심 정렬을 소개합니다.

첫 번째 단계는 기본 스와이퍼 페이지를 만드는 것입니다.

<div class="swiper-container">
            <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 class="swiper-pagination"></div>
        </div>

그런 다음 선택기를 사용하여 페이지 너비를 다르게 설정합니다. 자동 그룹화 효과 )

body{
                margin:0;
                padding:0;
                background:#F2F2F2;
            }
            .swiper-container{
                width:100%;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                width:60%;
                font-size:18px;
                text-align:center;
                justify-content:center;
                align-items:center;
                display:flex;
                background:#fff;
            }
            .swiper-slide:nth-child(2n){   //设定页面不同的宽度
                width:40%;
            }
            .swiper-slide:nth-child(3n){
                width:20%;
            }

그런 다음 js 코드로 이동하여 초기화하고 속성을 추가합니다.

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                slidesPerView:&#39;auto&#39;,
                spaceBetween:30,
                centeredSlides:true
            });
        </script>

js에 추가된 속성을 통해 다음을 확인할 수 있습니다. 그룹화된 속성만 값이 'auto'로 변경된 다음 슬라이드 페이지를 중앙에 배치하는 속성만 켜면 매우 간단하지 않나요?

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