如何给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%;}

推荐阅读

  1. 如何更改swiper中箭头的颜色及大小?
  2. 如何在swiper中使用两个轮播效果?
  3. Swiper4.x使用方法
  4. Google Search Console移动设备易用性报错修复【已解决】
  5. 熊掌号中天级收录和周级收录的区别?
  6. 如何在没有插件的情况下为WordPress中的外部链接添加nofollow
  7. 在wordpress通过代码实现百度主动推送|手工提交|实时推送
  8. wordpress熊掌号站点天级收录链接提交代码【不用插件实现】

5人评论了“如何给swiper轮播图片加超链接?”

  1. Free auto approve list 7-27-2018

    I added a new list. As you’ll see it’s bigger than most of them. I hope you all have had a great week!

发表评论

电子邮件地址不会被公开。 必填项已用*标注