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












2、html代码:


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

你可能感兴趣的:(Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器)