OwlCarousel 基于 jQuery 幻灯片轮播插件

• Z时代
• 2024-01-10
• 分类：IT

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件。

特点

它具有一下特点：

• 兼容所有浏览器
• 支持响应式
• 支持 CSS3 过度
• 支持触摸事件
• 支持 JSON 及自定义 JSON 格式
• 支持进度条
• 支持自定义事件
• 支持延迟加载
• 支持自适应高度

Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。

兼容

浏览器兼容：兼容所有浏览器，包括 IE6、IE7。

• Chrome
• Firefox
• Opera
• IE7/8/10/11
• iPad Safari
• iPod4 Safari
• Nexus 7 Chrome
• Galaxy S4
• Nokia 8s Windows8

jQuery 兼容：兼容 1.7 及以上版本。

目录结构

owlcarousel/
├── assets/
│   ├── owl.carousel.css
│   ├── owl.carousel.min.css
│   ├── owl.theme.default.css
│   ├── owl.theme.default.min.css
│   ├── owl.theme.green.css
│   ├── owl.theme.green.min.css
│   └── owl.video.play.png
│
├── owl.carousel.js
├── owl.carousel.min.js
├── LICENSE-MIT
└── README.md

使用方法

1、引入文件

<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

2、HTML

<div id="owl-demo" class="owl-carousel">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

3、JavaScript

$(function(){
    $('#owl-example').owlCarousel();
});

参数

回调函数

自定义事件

相关链接

• 官网：http://owlcarousel2.github.io/OwlCarousel2/
• Github 地址：https://github.com/OwlCarousel2/OwlCarousel2
• 基本示例：https://www.wenjiangs.com/runcode?slug=oJHgrWZS

  https://www.wenjiangs.com/runCode/view/oJHgrWZS

以上是 OwlCarousel 基于 jQuery 幻灯片轮播插件 的全部内容， 来源链接： utcz.com/p/232564.html