建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery幻灯片插件OWL Carousel

来源:易助科技网浏览量:181收藏

简介


Owl Carousel 是一个强大、实用但小巧的 jQuery 响应式幻灯片滚动特效插件,兼容所有浏览器,支持触屏、ipad、pc,兼容性好。Owl Carousel 提供了众多的参数、回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求。


JQuery幻灯片插件OWL Carousel-示例图


插件特点:


兼容所有浏览器

支持响应式

支持 CSS3 过度

支持触摸事件

支持 JSON 及自定义 JSON 格式

支持进度条

支持自定义事件

支持延迟加载

支持自适应高度



使用方法


1. 引入文件


<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.default.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>


3. 调用


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



相关链接


官网 :http://owlcarousel2.github.io/OwlCarousel2/

Github 地址 :https://github.com/OwlCarousel2/OwlCarousel2

演示地址1:https://www.wenjiangs.com/runcode?slug=oJHgrWZS

演示地址2:https://www.wenjiangs.com/runCode/view/oJHgrWZS