1. 소개 및 swiper.css swiper.js
2. 추가 코드
<DIV 클래스 = "swiper 컨테이너">
<DIV 클래스 = "swiper-래퍼">
<DIV 클래스 = "swiper 슬라이드">
<IMG SRC = "../ res_im / banner_bg.png"ALT = ""> 1
</ DIV>
<DIV 클래스 = "swiper 슬라이드">
<IMG SRC = "../ res_im / banner_bg.png"ALT = ""> 2
</ DIV>
<DIV 클래스 = "swiper 슬라이드">
<IMG SRC = "../ res_im / banner_bg.png"ALT = ""> 3
</ DIV>
</ DIV>
<! - 당신이 호출기에 필요한 경우 ->
<DIV 클래스 = "swiper-매김"> </ DIV>
<! - 당신이 탐색 버튼을해야하는 경우 ->
<DIV 클래스 = "swiper 버튼 - 이전"> </ DIV>
<DIV 클래스 = "swiper 버튼 - 다음"> </ DIV>
</ DIV>
3.css 스타일
.swiper 컨테이너 {// 일체도 스타일을 회전
오버 플로우 : 숨겨진;
폭 : 16rem;
높이 : 8.911111rem;
위치 : 상대;
Z- 색인 0;
}
작은 도트 .swiper 컨테이너> .swiper - 페이징 {// 페이징 전체 패턴
폭 : 3.488889rem;
높이 : .377778rem;
위치 : 절대;
상단 : .333333rem;
좌측 : 50 %;
여백 왼쪽 : -1.744444rem;
디스플레이 : 플렉스;
정당화-내용 : 공간 사이를;
}
.swiper 컨테이너> .swiper-매김 .swiper-매김-총알 {// 현재 선택된 점 스타일
폭 : .377778rem;
높이 : .377778rem;
경계 반경 : 50 %;
배경 색상 : # 000;
}
.swiper 컨테이너> .swiper 래퍼 {
폭 : 100 %;
신장 : 100 %;
}
.swiper 컨테이너> .swiper 래퍼> .swiper 슬라이드 {
폭 : 100 %;
신장 : 100 %;
}
.swiper 컨테이너> .swiper 래퍼> .swiper 슬라이드> {IMG
폭 : 100 %;
신장 : 100 %;
}
.swiper 버튼 - 이전, - .swiper 용기 RTL .swiper 버튼 - 다음 {// 다음 버튼
배경 이미지 : 홈페이지 (../ res_im / arrow_L.png) 중요한;!
}
.swiper 버튼 - 다음, .swiper 컨테이너-RTL .swiper 버튼 - 이전 {뒤로 버튼
배경 이미지 : 홈페이지 (../ res_im / arrow_R.png) 중요한;!
}