演示版

更多演示

太棒了!

在此处查看更多演示!看看猫头鹰能做什么。

如何使用

1.加载jQuery并包含Owl Carousel插件文件

要使用Owl Carousel,您需要确保同时包含Owl和jQuery 1.7或更高版本的脚本。

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- 默认 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>

2.设置您的HTML

您不需要任何特殊标记。您需要做的就是将divs(owl与任何type元素一起使用)包装在container元素内<div class =“ owl-carousel”>。必须使用“ owl-carousel”类才能应用来自owl.carousel.css文件的适当样式。

<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.调用插件

现在调用Owl初始化函数,您的轮播准备就绪。

$(document).ready(function() {

  $("#owl-example").owlCarousel();

});

客制化

1.选项

以下所有选项可用于自定义Owl Carousel。

变量 默认 类型 描述
项目 5 整型 此变量使您可以设置浏览器宽度最大时一次显示的最大项目数
桌面 [1199,4] 数组 这使您可以预设具有特定浏览器宽度的可见幻灯片的数量。格式为[x,y],其中x =浏览器宽度,y =显示的幻灯片数量。例如[1199,4]表示if(window<= 1199){每页显示4张幻灯片} Alternatively use 桌面: 假 to override these settings. Check my 定制演示
项目桌面小 [979,3] 数组 如上。
平板电脑 [768,2] 数组 如上。
项目平板电脑小 数组 如上。默认值为禁用。
ItemsMobile [479,1] 数组 如上
项目Custom 数组 这使您可以根据宽度添加项目的自定义变体 如果设置此选项,则禁用itemsDeskop,itemDesktopSmall,itemTablet,itemMobile等。 为了获得更好的预览效果,请按屏幕大小对数组进行排序,但这不是强制性的 不要忘了包括最低的可用屏幕尺寸,否则对于低于最低可用屏幕的屏幕将采用默认的屏幕尺寸。
例:
[[0,2],[400,4],[700,6],[1000,8],[1200,10],[1600,16]]
有关内部数组的结构的更多信息,请参见itemsDesktop。检查我的 定制演示
singleItem 布尔值 仅显示一项。 观看演示
项目ScaleUp 布尔值 选择小于提供的项目时不拉伸项目。 观看演示
slideSpeed 200 整型 滑动速度(以毫秒为单位)
分页速度 800 整型 分页速度(以毫秒为单位)
倒带速度 1000 整型 倒带速度(以毫秒为单位)
自动播放 整数/布尔值 Change to any 整型egrer for example 自动播放 : 5000 to play every 5 seconds. If you set 自动播放: 真正 default speed will be 5 seconds.
stopOnHover 布尔值 停止在鼠标悬停时自动播放
导航 布尔值 显示“下一个”和“上一个”按钮。
导航Text [“上一个”,“下一个”] 数组 You can cusomize your own text for 导航. To get empty buttons use 导航Text : 假. Also HTML can be used 这里
倒带导航 真正 布尔值 Slide to first item. Use 倒带速度 to change animation speed.
scrollPerPage 布尔值 滚动而不是每个项目滚动。这会影响下一个/上一个按钮和鼠标/触摸拖动。
分页 真正 布尔值 显示分页。
分页号码 布尔值 在分页按钮内显示数字
反应灵敏 真正 布尔值 您也可以在仅限桌面的网站上使用Owl Carousel!只需将其更改为“ 假”即可禁用恢复功能
响应刷新率 200 整型 每200毫秒检查一次窗口宽度变化以做出响应
响应基本宽度 窗口 jQuery选择器 猫头鹰轮播检查窗口,用于更改浏览器宽度。您可以使用任何其他jQuery元素来检查宽度更改,例如“ .owl-demo”。只有在“ .owl-demo”获得新的宽度时,猫头鹰才会改变。
baseClass “猫头鹰旋转木马” 自动添加基本CSS样式的类。如果不需要,最好不要更改它。
主题 “猫头鹰主题” 导航和按钮的默认Owl CSS样式。更改它以匹配您自己的主题
延迟加载 布尔值 Delays loading of images. 图片 outside of viewport won't be loaded before user scrolls to them. Great for mobile devices to speed up page loadings. IMG need special markup class="lazyOwl" and data-src="your img path". 参见示例。
懒人跟随 真正 布尔值 使用分页时,它会跳过从跳过的页面加载图像。它仅加载在视口中显示的图像。如果设置为false,则使用分页时将加载所有图像。它是延迟加载功能的子设置。
懒惰效应 “褪色” 布尔值/字符串 默认值为400ms速度上的fadeIn。使用false删除该效果。
自动高度 布尔值 在owl-wrapper-outer的外部增加高度,以便可以在幻灯片上使用不同的高度。每页设置仅将其用于一项。
jsonPath 允许您直接从jSon文件加载。您使用的JSON结构需要与此处使用的owl JSON格式结构匹配。要使用自定义JSON结构,请参见jsonSuccess选项。
json成功 功能 $ .getJSON的成功回调内置在轮播中。查看具有自定义JSON结构的演示 这里.
dragBeforeAnimFinish 真正 布尔值 忽略过渡是否完成(仅拖动)。
mouseDrag 真正 布尔值 关闭/打开鼠标事件。
touchDrag 真正 布尔值 关闭/打开触摸事件。
addClassActive 布尔值 在可见项目上添加“活动”类。适用于屏幕上任意数量的项目。
transitionStyle 添加CSS3过渡样式。仅适用于屏幕上的一项。 观看演示

2.回调

变量 默认 类型 描述
更新之前 功能 在响应更新回调之前
之后更新 功能 响应更新回调后
beforeInit 功能 初始化回调之前
afterInit 功能 初始化回调后
beforeMove 功能 移动回调之前
afterMove 功能 移动后回调
afterAction 功能 启动后,移动并更新回调
startDragging 功能 拖动时调用此函数。
afterLazyLoad 功能 在lazyLoad之后调用此函数。

3.默认值

轮播默认设置

$("#owl-example").owlCarousel({

    // Most important owl features
    项目 : 5,
    项目Custom : 假,
    桌面 : [1199,4],
    项目桌面小 : [980,3],
    平板电脑: [768,2],
    项目平板电脑小: 假,
    ItemsMobile : [479,1],
    singleItem : 假,
    项目ScaleUp : 假,

    //Basic Speeds
    slideSpeed : 200,
    分页速度 : 800,
    倒带速度 : 1000,

    //Autoplay
    自动播放 : 假,
    stopOnHover : 假,

    // Navigation
    导航 : 假,
    导航Text : [“上一个”,“下一个”],
    倒带导航 : 真正,
    scrollPerPage : 假,

    //Pagination
    分页 : 真正,
    分页号码: 假,

    // 反应灵敏 
    反应灵敏: 真正,
    响应刷新率 : 200,
    响应基本宽度: 窗口,

    // CSS Styles
    baseClass : “猫头鹰旋转木马”,
    主题 : “猫头鹰主题”,

    //Lazy load
    延迟加载 : 假,
    懒人跟随 : 真正,
    懒惰效应 : “褪色”,

    //Auto height
    自动高度 : 假,

    //JSON 
    jsonPath : 假, 
    json成功 : 假,

    //Mouse Events
    dragBeforeAnimFinish : 真正,
    mouseDrag : 真正,
    touchDrag : 真正,

    //Transitions
    transitionStyle : 假,

    // Other
    addClassActive : 假,

    //Callbacks
    更新之前 : 假,
    之后更新 : 假,
    beforeInit: 假, 
    afterInit: 假, 
    beforeMove: 假, 
    afterMove: 假,
    afterAction: 假,
    startDragging : 假
    afterLazyLoad : 假

})

4.自定义事件

猫头鹰轮播会处理一些基本事件。主要用于自定义导航。 观看演示

"owl.prev" //Go to previous
"owl.next" //Go to next
"owl.play" //Autoplay, also this event accept 自动播放 speed as second parameter
"owl.stop" //Stop
"owl.goTo" //goTo provided item
"owl.jumpTo" //jumpTo provided item. Without slide animation.

5.猫头鹰数据方法

要使用Owl Carousel $ .data,请使用委托函数。

//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.jumpTo(x)  // Go to x slide without slide animation

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

//Manipulation methods. 观看演示.
owl.addItem(htmlString [,targetPosition])
owl.removeItem(targetPosition)
owl.destroy()
owl.reinit(newOptions)

常问问题

我可以免费使用吗?
是!
我可以将其用于电子商务吗?
是!
有执照吗?
麻省理工学院
我可以要求一项新功能吗?
是!采用 Github
我需要帮助!
给我发一个 电子邮件,访问 Github 或添加评论 下面。
不要忘记添加链接到您的演示/示例网站!
它是否具有无限滚动/圆形/循环幻灯片?
抱歉,没有。
最新版本有什么新功能?
看到 变更日志

领英

评论由 领英