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