如何给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. Ubuntu下Apache开启Rewrite模块
  5. 重启阿帕奇( apache )命令
  6. 织梦(dedecms)调用不到{dede:global.cfg_keywords/}等自定义标签值
  7. 如何设置SuiteCRM通过IP访问?【不通过域名访问SuiteCRM】
  8. WordPress上添加Description(描述)和Keywords(关键词)标签代码

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!

发表评论

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