스와이프의 기본 사용법 (6)-HTML 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-01-20 15:23:50

원래의

1206명이 탐색했습니다.

이 섹션에서는 주로 스와이프의 센터링 속성을 소개합니다.

이 센터링은 우리가 탐색하고 있는 현재 페이지를 중앙에 배치하는 것을 의미하며 그룹 표시를 사용할 때 그 효과가 더욱 분명해집니다.
우선 첫 번째 섹션의 내용에 따라 기본 스와이퍼 페이지를 완성해야 합니다.

   <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 class="swiper-slide">第十一页</div>
                <div class="swiper-slide">第十二页</div>
                <div class="swiper-slide">第十三页</div>
            </div>
        </div>

로그인 후 복사

그런 다음 페이지를 초기화하여 효과를 더욱 명확하게 하기 위해 테스트 중에 페이지에 그룹 표시와 페이지 간격을 추가합니다. 프로세스 페이지 효과를 보기 위해 그룹 표시를 삭제하거나 주석을 달 수도 있습니다.

<script>            
var swipre = new Swiper(&#39;.swiper-container&#39;,{                
slidesPerView:4,   //分组显示                
spaceBetween:30    //页面间隙                
centeredSlides:true  //页面居中            
});        
</script>

로그인 후 복사

이렇게 해서 우리 프로젝트에 페이지 센터링 속성이 추가됩니다

위는 swiper(6)의 기본 사용법입니다. PHP 중국어 홈페이지(www.php.cn)!