Owl Carousel强大的响应式jQuery焦点图轮播插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > Owl Carousel强大的响应式jQuery焦点图轮播插件
Owl Carousel强大的响应式jQuery焦点图轮播插件
分享:

    插件介绍

    Owl Carousel是一款强大的响应式jQuery焦点图轮播插件。Owl Carousel集成了许多功能,如支持触摸屏,图片懒加载,各种css3切换效果,json数据,随机排列图片等,并且这些功能都是可以定制的。

    浏览器兼容性

    浏览器兼容性
    时间:10-22
    阅读:

简要教程

Owl Carousel是非常强大的jQuery焦点图插件,这个焦点图插件功能众多,高度可定制性,支持触摸设备,并且是响应式的。

引入必要的js文件和css文件

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>             
                

HTML结构

使用Owl Carousel焦点图插件只需要创建一个div,给它一个特定的classowl-carousel既可。

<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>
                

更多信息:http://owlgraphic.com/owlcarousel/