BootStrap实现轮播图效果(收藏)_bootstrap轮播图资源-CSDN文库

bootstrap实现轮播

34 浏览量 2020-08-31 19:42:18 上传评论 1 收藏 41KB PDF 举报

资源推荐

资源详情

资源评论

BootStrap实现轮播图效果实现轮播图效果(收藏收藏)

主要介绍了BootStrap实现轮播图效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下

今天学习bootstrap，发现轮播图的实现很强大，于是记录下来，方便自己以后使用。

1：相关知识总结：相关知识总结

carousel slide：整个轮播图的最外边一层的样式

data-ride：用于标记轮播在页面加载时就开始动画播放

data-interval：自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环

data-wrap：轮播是否连续循环

carousel-indicators：轮播图的小圆点

data-target：

data-slide-to：向轮播传递一个原始滑动索引

carousel-inner：图片容器层的样式

data-slide：接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置

2：：demo

<body>

<div class="container">

<div class="row">

<div class="carousel slide" id="slide" data-ride="carousel" data-interval="2000" data-wrap="true">

<ol class="carousel-indicators">

<li data-target="#slide" data-slide-to="0" class="active"></li>

<li data-target="#slide" data-slide-to="1"></li>

</ol>

<div class="carousel-inner">

<div class="item active">

<img src="./image/p1.jpg" alt="">

<div class="carousel-caption">

<h3>商城</h3>

<p>第一张图片</p>

</div>

</div>

<div class="item">

<img src="./image/p2.jpg" alt="">

<div class="carousel-caption">

<h3>商城</h3>

<p>第二张图片</p>

</div>

</div>

</div>

<a class="carousel-control left" data-target="#slide" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

<span class="sr-only">‹</span>

</a>

<a class="carousel-control right" data-target="#slide" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

<span class="sr-only">›</span>

</a>

</div>

</div>

</div>

</body>

以上所述是小编给大家介绍的BootStrap实现轮播图效果(收藏)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小

编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

内容反馈

weixin_38616809

粉丝: 6
资源: 981

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip