Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

在项目中，需要做一个幻灯功能，领导说需要一个小清醒的啊，轻量级的。刚开始搜索到这个：

CRAFTYSLIDE插件。但是用起来比较麻烦。后来找到这个Jquery 插件：OWL Carousel。咋起了这么个名字，真是不明白。

反正好用就行吧。很好用，分享给大家。

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

1. Jquery插件，品牌好，哈哈。基于Jquery开发，比较稳定

2. 文件小。Css+js不到10k，压缩之后。

3. 支持触屏。经过测试，在android手机的主流浏览器：QQ、百度、UC、微信内置浏览器等支持

4. 响应式设计。支持不用屏幕、触屏。支持div、图片等。支持全部显示、单个显示

5. 简洁代码，使用方便

Demo截图：

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

支持图片

支持单个项目显示

使用方法：

引用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>

在你的页面中，创建一下结构的html代码：

最后，调用OWL Carousel插件提供的方法：

$(document).ready(function() {

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

});

是不是很简单？

OWL Carousel参数说明：

参数	默认值	说明
slideSpeed	200	滑动间隔时间，毫秒
paginationSpeed	false	是否支持分页
autoPlay	false	是否自动播放。
goToFirst	true	回到首页
goToFirstSpeed	1000	回到首页时间
stopOnHover	false	设置成true不支持触摸
navigation	false	是否显示上一个和下一个按钮。
navigationText	["prev","next"]	显示上下页的文字。不需要的话设置成false："navigationText : false"
pagination	true	显示分页
paginationNumbers	false	是否显示分页数字
responsive	true	是否开启响应式设计
items	5	一次展示项目个数
itemsDesktop	[1199,4]	在桌面宽度受限的情况，显示项目数
itemsDesktopSmall	[979,3]	同上
itemsTablet	[768,2]	同上
itemsMobile	[479,1]	同上
baseClass	"owl-carousel"	样式
theme	"owl-theme"	使用的主题

外部调用的api接口：

1	<span style="font-size: 14px;"> </span>

//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

1

实例代码：支持div滑动

<div id="owl-example" class="owl-carousel owl-theme" style="opacity: 1; display: block; ">

                <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4680px; left: 0px; display: block; -webkit-transform: translate3d(0px, 0px, 0px); "><div class="owl-item" style="width: 234px; "><div class="item darkCyan">
                  <img src="assets/img/demo-slides/touch.png" alt="Touch">
                    <h3>Touch</h3>
                    <h4>Can touch this</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item forestGreen">
                  <img src="assets/img/demo-slides/grab.png" alt="Grab">
                    <h3>Grab</h3>
                    <h4>Can grab this</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item orange">
                  <img src="assets/img/demo-slides/responsive.png" alt="Responsive">
                    <h3>Responsive</h3>
                    <h4>Fully responsive!</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item yellow">
                  <img src="assets/img/demo-slides/css3.png" alt="CSS3">
                    <h3>CSS3</h3>
                    <h4>3D Acceleration.</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item dodgerBlue">
                  <img src="assets/img/demo-slides/multi.png" alt="Multi">
                    <h3>Multiply</h3>
                    <h4>Owls on page.</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item skyBlue">
                  <img src="assets/img/demo-slides/modern.png" alt="Modern Browsers">
                    <h3>Modern</h3>
                    <h4>Browsers Compatibility</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item zombieGreen">
                  <img src="assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
                    <h3>Zombie</h3>
                    <h4>Browsers Compatibility</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item violet">
                  <img src="assets/img/demo-slides/controls.png" alt="Take Control">
                    <h3>Take Control</h3>
                    <h4>The way you you like</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item yellowLight">
                  <img src="assets/img/demo-slides/feather.png" alt="Light">
                    <h3>Light</h3>
                    <h4>As a feather</h4>
                </div></div><div class="owl-item" style="width: 234px; "><div class="item steelGray">
                  <img src="assets/img/demo-slides/tons.png" alt="Tons of Opotions">
                    <h3>Tons</h3>
                    <h4>of options</h4>
                </div></div></div></div> 

              <div class="owl-controlls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div>

项目地址：https://github.com/OwlFonk/OwlCarousel

demo地址：http://owlgraphic.com/owlcarousel/demos/images.html

 

 

 

标签: Jquery插件, jquery轻量幻灯, jquery OWL Carousel使用说明, OWL Carousel使用, jquery触屏幻灯