집 >웹 프론트엔드 >HTML 튜토리얼 >스와이프의 기본 사용법 (11)

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

黄舟원래의: 2017-01-20 15:30:061394검색

이번 장에서는 스와이퍼 페이지에서 커서의 스타일을 변경하는 스와이퍼의 그리퍼 커서를 소개합니다.

첫 번째 단계는 기본 스위퍼 페이지 레이아웃을 구축하는 것입니다.

아아아아

시연을 위해 왔기 때문에 페이지 스타일을 지정하는 것을 잊지 마세요.

<body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

외부 컨테이너의 너비를 100%, 높이를 300px로 설정합니다.
그런 다음 페이지 콘텐츠가 수직 및 수평 중앙에 오도록 설정합니다.
그런 다음 초기화를 위해 js 부분으로 이동합니다.

<style>
            body{
                margin:0;
                padding:0;
                background:#eee;
            }
            .swiper-container{
                width:300px;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                font-size:18px;
                background:#fff;
                display:flex;
                text-align:center;
                justify-content:center;
                align-items:center;
            }
        </style>

여기에서는 페이지 그룹 표시를 설정하므로 페이지 너비가 자동으로 외부 컨테이너의 너비를 나누고 페이지 높이는 여전히 300px입니다.
그런 다음 커서 스타일을 손 모양 커서로 변경하면 여전히 속성이고 효과를 얻을 수 있어 매우 편리하다는 것을 알 수 있습니다.

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

성명：

이전 기사：스와이프의 기본 사용법 (10)다음 기사：스와이프의 기본 사용법 (10)

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

관련 기사