Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

今天看到一个插件OWL Carousel幻灯片。

一、首先是说明一下OWL Carousel幻灯的主要功能。

1、Jquery插件，品牌好，哈哈。基于Jquery开发，比较稳定2、文件小。Css+js不到10k，压缩之后。3、支持触屏。经过测试，在android手机的主流浏览器：QQ、百度、UC、微信内置浏览器等支持4、响应式设计。支持不用屏幕、触屏。支持div、图片等。支持全部显示、单个显示5、简洁代码，使用方便

二、OWL Carousel幻灯支持的展示内容类型

1、支持div如下图.div内容你自己定义就行

2、支持图片

3、支持单个项目显示

三、使用方法

1、引用js和css文件

<!-- Basic stylesheet --><link rel="stylesheet" href="owl-carousel/owl.carousel.css"><!-- Default Theme --><link rel="stylesheet" href="owl-carousel/owl.theme.css"><!-- You can use latest version of jQuery  --><script src="jquery-1.9.1.min.js"></script><!-- Include js plugin --><script src="assets/owl-carousel/owl.carousel.js"></script>

2、html代码：

<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>

3、js

$(document).ready(function() {  $("#owl-example").owlCarousel();});

四、OWL Carousel参数说明

参数 默认值 说明 slideSpeed 200 滑动间隔时间，毫秒 paginationSpeed false 是否支持分页 autoPlay false 是否自动播放。 goToFirst true 回到首页 goToFirstSpeed 1000 回到首页时间 stopOnHover false 设置成true不支持触摸 navigation false 是否显示上一个和下一个按钮。 navigationText [“prev”,”next”] 显示上下页的文字。不需要的话设置成false： “navigationText : false” pagination true 显示分页 paginationNumbers false 是否显示分页数字 responsive true 是否开启响应式设计 items 5 一次展示项目个数 itemsDesktop [1199,4] 在桌面宽度受限的情况，显示项目数 itemsDesktopSmall [979,3] 同上 itemsTablet [768,2] 同上 itemsMobile [479,1] 同上 baseClass “owl-carousel” 样式 theme “owl-theme” 使用的主题

五、 外部调用的api接口

//Initialize Plugin$(".owl-carousel").owlCarousel()//get carousel instance data and store it in variable owlvar owl = $(".owl-carousel").data('owlCarousel');//Public methodsowl.next()   // Go to next slideowl.prev()   // Go to previous slideowl.goTo(x)  // Go to x slideowl.update() // Update Slideowl.buildControlls()    // Build Controllsowl.destroyControlls()  // Remove Controllsowl.play() // Autoplayowl.stop() // Autoplay Stop