Powerful and practical jquery Slideshow Plugin Owl Carousel

Source: Internet
Author: User

Demo download

Brief introduction

OWL Carousel is a powerful, practical but compact JQuery slideshow plugin that features:

    • Compatible with all browsers
    • Support Response Style
    • Support CSS3 over
    • Support for touch events
    • Supports JSON and custom JSON formats
    • Support Progress bar
    • Support for custom events
    • Support for lazy loading
    • Supports Adaptive heights
    • ......

OWL Carousel provides a number of parameters, callback functions, and custom events (see below), so it can meet almost all of your requirements.

Compatible

Browser compatible: Compatible with all browsers, including IE6, IE7.

JQuery compatible: Compatible with version 1.7 and above.

Using Method 1, introducing the file
<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 ();});
Parameters
Parameters type Default Value Description
Items Integer 5 Number of visible slides per page
Itemsdesktop Array [1199,4] Set the browser width and the number of slides visible in the format [x,y],x is the browser width, Y is the visible number, such as [1199,4] is if the browser width is less than 1199, each page shows 4, this parameter is mainly used for responsive design. You can also use false
Itemsdesktopsmall Array [979,3] Ditto
Itemstablet Array [768,2] Ditto
Itemstabletsmall Array False Ibid., default = False
Itemsmobile Array [479,1] Ditto
Itemscustom Array False
Singleitem Boolean value False Do you want to show only one single
Itemsscaleup Boolean value False
Slidespeed Integer 200 Slide transition speed, in milliseconds
Paginationspeed Integer 800 Paging switching speed, in milliseconds
Rewindspeed Integer 1000 Returns the speed, in milliseconds
AutoPlay Boolean/integer False AutoPlay, Optional Boolean or integer, if using integers, such as 3000, to switch once for 3 seconds, or 5 seconds by default if set to True
Stoponhover Boolean value False Mouse Hover Stop Auto Play
Navigation Boolean value False Show "Previous", "Next"
Navigationtext Array ["Prev", "Next"] Set "Previous", "Next" text, default is ["Prev", "Next"]
Rewindnav Boolean value True Swipe to the first
Scrollperpage Boolean value False Scrolls per page instead of per item
Pagination Boolean value True Show pagination
Paginationnumbers Boolean value False The paging button displays the number
Responsive Boolean value True
Responsiverefreshrate Integer 200 Detects window widths every 200 milliseconds and adjusts accordingly, primarily for responsive
Responsivebasewidth JQuery Selector Window
BaseClass String Owl-carousel Add CSS, if not required, it is best not to use
Theme String Owl-theme Theme styles that you can add yourself to suit your requirements
Lazyload Boolean value False Lazy Loading
Lazyfollow Boolean value True When paging is used, if you are browsing across pages, the pictures that skip the page are not loaded, only the pictures that you want to show the page are loaded, and if set to false, the picture that skips the page is loaded. This is Lazyload's sub-option.
Lazyeffect Boolean value/String Fade Delay loading the display of the picture, the default is 400 milliseconds fade in, if False does not use the effect
Autoheight Boolean value False Automatic use of height
JsonPath String False JSON file path
Jsonsuccess Function False Functions for working with custom JSON formats
Dragbeforeanimfinish Boolean value True Ignore excessive completion (drag only)
Mousedrag Boolean value True Turn off/Turn on mouse events
Touchdrag Boolean value True Turn off/turn on touch events
Addclassactive Boolean value False Adding an "active" class to a visible item
Transitionstyle String False Add CSS3 over effects
callback function
variable type default description
beforeUpdate function false response callback function
AFTERUPDA Te function false response before callback function
beforeinit function false Pre-initialization callback function
afterinit function false callback after initialization
beforemove function false Move previous callback function
A Ftermove function false post-Move callback function
afteraction function false callback function after initialization
startdragging function false dragged callback function
afterlazyload function false deferred post-load callback function
Custom events
Events Description
Owl.prev To the previous
Owl.next To the next
Owl.play Auto play, can pass one parameter as playback speed
Owl.stop Stop Auto Play
Owl.goto Jump to the first few
Owl.jumpto Skip to the first number without using animations

Demo download

Powerful and practical jquery Slideshow Plugin Owl Carousel

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.