网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
基于jQuery+Bootstrap3和Html5实现的响应式全宽度内容旋转/滑块效果,不需要额外的Javascript和CSS。
1. 首先,在html页面中加载bootstrap3框架和插件文件。
<link href="bootstrap.min.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
2.创建底部指示器。
<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>
3.添加旋转木马内容。
<div class="carousel-inner">
<div class="item active"> <img src="3.jpg" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1> Headling 1 </h1>
<p> Description 1</p>
</div>
</div>
</div>
<div class="item"> <img src="2.jpg" style="width:100%" data-src="" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h2>
Headling 2
</h1>
<p> Description 2</p>
</div>
</div>
</div>
<div class="item"> <img src="1.jpg" style="width:100%" data-src="" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h2>
Headling 3
</h1>
<p> Description 3</p>
</div>
</div>
</div>
</div>
4. 创建左右导航箭头。
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
5.在父元素中包含底部指示器、旋转木马内容和箭头导航。
<div id="myCarousel" class="carousel slide" data-ride="carousel">
...
</div>
转载请注明来源:jQuery+Bootstrap3响应式全宽轮播图插件
本文永久链接地址:https://www.moyouyouw.cn/code/852.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论