Bootstrap响应式轮播插件flexible-bootstrap-carousel

所属分类:媒体-滑块和旋转,幻灯片和轮播图

 5703  51  查看评论 (6)
Bootstrap响应式轮播插件flexible-bootstrap-carousel ie兼容9

flexible-bootstrap-carousel

在页面中引入bootstrap相关文件和jquery文件。

<link href="path/to/bootstrap.min.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>

然后引入轮播图插件需要的相关文件:

<link rel="stylesheet" type="text/css" href="css/flexible-bootstrap-carousel.css" />
<script type="text/javascript" src="js/flexible-bootstrap-carousel.js"></script>

HTML结构

该基于Bootstrap的响应式Carousel轮播图的HTML结构如下。

<div class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true">
  <div class="items">
    <div class="flex-item"> <img class="img-responsive" src="images/item1.jpg"/> </div>
    <div class="flex-item"> <img class="img-responsive" src="images/item2.jpg"/> </div>
    <div class="flex-item"> <img class="img-responsive" src="images/item3.jpg"/> </div>
    <div class="flex-item"> <img class="img-responsive" src="images/item4.jpg"/> </div>
    <div class="flex-item"> <img class="img-responsive" src="images/item5.jpg"/> </div>
    <div class="flex-item"> <img class="img-responsive" src="images/item6.jpg"/> </div>
  </div>
  <div class="carousel-inner" role="listbox"> </div>
  <a class="left carousel-control" href="#simple-content-carousel" role="button" data-slide="prev"> 
  <span class="fa fa-angle-left" aria-hidden="true"></span> 
  <span class="sr-only">Previous</span> </a> 
  <a class="right carousel-control" href="#simple-content-carousel" role="button" data-slide="next"> 
  <span class="fa fa-angle-right" aria-hidden="true"></span> 
  <span class="sr-only">Next</span> </a> 
</div>
相关插件-滑块和旋转,幻灯片和轮播图

jquery跨浏览器控制图片旋转插件jQueryRotate.js

跨浏览器控制图片旋转jquery插件进行任意角度的旋转。对于不支持CSS3动画的浏览器,插件会自动使用canvas或VML(IE6)技术进行回退。
  滑块和旋转
 2602  43

jQuery滑块插件slider

jQuery滑块插件slider很强大
  滑块和旋转
 11488  53

超强兼容的滑动显示条

滑动条可以点击并拖动滑块使其滑动也可以直接点击滑动条的任意部分使其滑动并且在输入框中显示滑动了的数值
  滑块和旋转
 8625  48

jQuery内容滚动插件BoxSlider

BoxSlider 是一款小巧的 jQuery 内容滚动滑动插件,当鼠标悬停在箭头上,内容就会按照相应的方向滚动。你可以用于大篇幅文字(小说)或图片展示。
  滑块和旋转
 726  5

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    ご冬冬变坏了?… 0
    2017/6/23 11:00:09

    就是兼容性不是很好

    回复
    就这样吧 0
    2017/5/8 17:39:26

    怎么在百度公共库拿下第一个css样式

    回复
    blueskyc 0
    2017/4/11 17:39:58

    不错,正需要~~ 谢谢分享

    回复
    妖吖遇见Mr_Simple 0
    2017/3/28 10:22:44

    第一次做响应式页面,遇到这个比较难的效果,来学习了。非常好

    回复
    爱死寂寞人 0
    2017/2/28 9:55:25

    正是我要的,所有滚动元素在一个div内,bootstrap原生的,需要多个div

    回复
    dyhchboy 0
    2017/2/27 17:40:12
取消回复