如何给swiper轮播图片加超链接?

我们在使用swiper做轮播图时,由于添加的轮播图片是以背景图的形式展现的,所以不能在图片外圈加一层<a>标签,所以如何让轮播的图片可以超链接呢?

做法如下:在<div class=”swiper-slide”></div>里添加a标签,并对a标签设置样式。

HTML:

<div class="swiper-container" id="swiper0">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(./style/b01.jpg)"><a href="/swt/"></a></div>
...
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

样式:

.banner a{display: block;width: 100%;height: 100%;}

滚动至顶部