swiper做导航
时间: 2023-07-24 22:17:37 浏览: 45
Swiper可以用来做不同类型的导航,例如轮播图导航、分页导航、滑动菜单导航等等。以下是一个使用Swiper做分页导航的示例代码:
HTML结构:
```
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#">导航1</a></div>
<div class="swiper-slide"><a href="#">导航2</a></div>
<div class="swiper-slide"><a href="#">导航3</a></div>
<div class="swiper-slide"><a href="#">导航4</a></div>
<div class="swiper-slide"><a href="#">导航5</a></div>
<div class="swiper-slide"><a href="#">导航6</a></div>
<div class="swiper-slide"><a href="#">导航7</a></div>
<div class="swiper-slide"><a href="#">导航8</a></div>
<div class="swiper-slide"><a href="#">导航9</a></div>
</div>
</div>
```
CSS样式:
```
.swiper-slide {
text-align: center;
}
.swiper-slide a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
```
JS代码:
```
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
```
这个示例中,我们创建了一个包含9个导航链接的Swiper分页导航。Swiper的slidesPerView参数设置为3,表示每次显示3个导航链接,spaceBetween参数设置为30,表示每个导航链接之间的间距为30px。Swiper的pagination参数设置为true,表示显示分页器,clickable参数设置为true,表示点击分页器可以切换到对应的导航链接。