내비게이션 swiper 전환
<link rel="stylesheet" type="text/css" href="swiper.min.css"/><!-- swiper.css-->
<style type="text/css">
.swiper-container{/* */
width:400px;
height:400px;
border:1px solid #aaa;
}
.swiper-slide{/* */
width:100%;
height:100%;
text-align: center;
line-height: 400px;
}
.swiper-pagination{/* , ， top ， */
border-bottom: 1px solid #aaa;
width:100%;
height:40px;
display: flex;
top:0;
}
.swiper-pagination-bullet-active{/* */
color:#808080;
}
.swiper-pagination-bullet{/* */
background:transparent;/* */
-webkit-flex-grow: 1;/* ， */
text-align: center;
line-height: 40px;
border-radius: 0;/* */
height: 40px;
color:#000000;
}
.swiper-pagination-bullet:nth-child(1):before{/* ;*/
content:"Slide 1";/* */
}
.swiper-pagination-bullet:nth-child(2):before{
content:"Slide 2";
}
.swiper-pagination-bullet:nth-child(3):before{
content:"Slide 3";
}
.swiper-pagination-bullet:nth-child(4):before{
content:"Slide 4";
}
.swiper-pagination-bullet:nth-child(5):before{
content:"Slide 5";
}
</style>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"/>
</div>
<script src="swiper.min.js" type="text/javascript" charset="utf-8"/><!-- swiper.js-->
<script type="text/javascript">
window.onload = function(){
alert(" ")
var swiper = new Swiper(".swiper-container", {
pagination: ".swiper-pagination",//
loop:true, // ， false
paginationClickable: true, // ， slide
speed:300, //slides
autoplayDisableOninteraction:true,//autoplay ， autoplay
// mode:'horizontal', //slides ，
});
}
</script></code></pre>
</article>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
