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

时间：2021-04-01 17:13:45

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内容你自己定义就行

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

支持图片

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

支持单个项目显示

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

使用方法：

引用js和css文件

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器
<!-- 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>
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

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

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

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

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器
$(document).ready(function() {

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

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

是不是很简单？

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>
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器
//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--支持触屏的移动浏览器
1
 

实例代码：支持div滑动

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器
<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>
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

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

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

 
 

相关文章