Jquery轻量级幻灯插件-OWL Carousel--支持触屏

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器
官方网址:猫头鹰旋转木马

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

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

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

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

1544424209(1).png

2、支持图片

1544424217(1).png
3、支持单个项目显示
1544424231(1).png

三、使用方法

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-demo" class="owl-carousel owl-theme">
 
  <div class="item"><img src="assets/fullimage1.jpg" alt=""></div>
  <div class="item"><img src="assets/fullimage2.jpg" alt=""></div>
  <div class="item"><img src="assets/fullimage3.jpg" alt=""></div>
 
</div>

3、js

$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
 
  });
 
});

四、OWL Carousel参数说明

参数	描述	默认值
items	幻灯片每页可见个数	5
itemsDesktop	设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false	[1199,4]
itemsDesktopSmall	同上	[979,3]
itemsTablet	同上	[768,2]
itemsTabletSmall	同上，默认为 false	false
itemsMobile	同上	[479,1]
slideSpeed	滑动间隔时间，毫秒	200
loop	是否无限循环，会复制第一项和最后一项来制作无限循环的错觉	false
paginationSpeed	是否支持分页	false
autoPlay	是否自动播放。	false
autoplayTimeout	旋转木马自动播放的时间间隔	5000
autoplayHoverPause	是否在鼠标滑过时停止自动播放	false
goToFirst	回到首页	true
goToFirstSpeed	回到首页时间	1000
stopOnHover	设置成true不支持触摸	false
navigation	是否显示上一个和下一个按钮。	false
navigationText	显示上下页的文字。不需要的话设置成false： “navigationText : false”	[“prev”,”next”]
pagination	显示分页	true
paginationNumbers	是否显示分页数字	false
responsive	是否开启响应式设计	true
theme	使用的主题	“owl-theme”
baseClass	样式	“owl-carousel”

五、 外部调用的api接口

//Initialize Plugin
$(".owl-carousel").owlCarousel()

//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel');

//Public methods
owl.next()   // Go to next slide
owl.prev()   // Go to previous slide
owl.goTo(x)  // Go to x slide

owl.update() // Update Slide

owl.buildControlls()    // Build Controlls
owl.destroyControlls()  // Remove Controlls

owl.play() // Autoplay
owl.stop() // Autoplay Stop