前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理

Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理

作者头像
老蒋
发布2021-12-27 10:17:15
1.2K0
发布2021-12-27 10:17:15
举报
文章被收录于专栏:老蒋专栏

如果按照从前需要在网站上加上幻灯片、图片轮播效果,早年老蒋做企业网站的时候是使用的Flash焦点图,后来用jquery幻灯片,虽然手边平时都积累备用几款常用的效果,毕竟这类的实例代码网上很多。但是,如果我们有使用Bootstrap框架那就更简单了,因为脚本框架中内置Carousel可以快速实现。

当然了,这里不能说jquery幻灯片效果不好,如果我们需要使用丰富复杂的还是需要自定义功能的,而默认的Bootstrap自带的也是简单的幻灯图片轮播效果而已。如果我们对于入门级简单需要实现的功能,可以直接参考内置默认的效果,这里整理两个Carousel简单的效果。

第一、官方文档自带的

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

第二、runoob无文字描述

<div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img src="slide1.png" alt="First slide"> </div> <div class="item"> <img src="slide2.png" alt="Second slide"> </div> <div class="item"> <img src="slide3.png" alt="Third slide"> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo; </a> </div>

图片需要自己定义,且CSS样式可以自己定义。

第三、有文字描述版

<div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img src="slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo; </a> </div>

文字标题可选择,可修改自己需要的。

内容参考:

http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

https://v3.bootcss.com/javascript/#carousel

本文出处:老蒋部落 » Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理 | 欢迎分享

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档