JQuery Owlcarousel Carousel

Owlcarousel is an owl carousel plugin.
Owlcarousel Advantages
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

Online example

Default	Single	Auto Play	Display the previous one	Self-adapting height
Lazy Loading	Loading JSON	Custom JSON	Progress bar	Random display

How to use

2. <div id="Owl-demo" class="Owl-carousel">
4. <a class="Item"> src="img/owl1.jpg" alt =""></a>
6.     <a class= "item" >src= "img/owl2.jpg"   alt=></a>
8. <a class="Item"> src="img/owl3.jpg" alt= ""></a>
10. ......
12. </div>

Copy

1. $(function() {
2. $(' #owl-example '). Owlcarousel();
3. });

CopyDetailed parameters

Parameters	Describe	Default value
Items	Number of visible slides per page	5
Itemsdesktop	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	[1199,4]
Itemsdesktopsmall	Ditto	[979,3]
Itemstablet	Ditto	[768,2]
Itemstabletsmall	Ibid., default = False	False
Itemsmobile	Ditto	[479,1]
Itemscustom
Singleitem	Do you want to show only one single	False
Itemsscaleup
Slidespeed	Slide transition speed, in milliseconds	200
Paginationspeed	Paging switching speed, in milliseconds	800
Rewindspeed	Returns the speed, in milliseconds	1000
AutoPlay	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	False
Stoponhover	Mouse Hover Stop Auto Play	False
Navigation	Show "Previous", "Next"	False
Navigationtext	Set "Previous", "Next" text, default is ["Prev", "Next"]	["Prev", "Next"]
Rewindnav	Swipe to the first	True
Scrollperpage	Scrolls per page instead of per item	False
Pagination	Show pagination	True
Paginationnumbers	The paging button displays the number	False
Responsive
Responsiverefreshrate	Detects window widths every 200 milliseconds and adjusts accordingly, primarily for responsive	200
Responsivebasewidth
BaseClass	Add CSS, if not required, it is best not to use	Owl-carousel
Theme	Theme styles that you can add yourself to suit your requirements	Owl-theme
Lazyload	Lazy Loading	False
Lazyfollow	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.	True
Lazyeffect	Delay loading the display of the picture, the default is 400 milliseconds fade in, if False does not use the effect	Fade
Autoheight	Automatic use of height	False
JsonPath	JSON file path	False
Jsonsuccess	Functions for working with custom JSON formats	False
Dragbeforeanimfinish	Ignore excessive completion (drag only)	True
Mousedrag	Turn off/Turn on mouse events	True
Touchdrag	Turn off/turn on touch events	True
Addclassactive	Adding an "active" class to a visible item	False
Transitionstyle	Add CSS3 over effects	False
BeforeUpdate	callback function after response	False
AfterUpdate	callback function prior to response	False
Beforeinit	Pre-initialization callback function	False
Afterinit	callback function after initialization	False
Beforemove	Before moving the callback function	False
Aftermove	Post-Move callback function	False
Afteraction	callback function after initialization	False
Startdragging	Drag the callback function	False
Afterlazyload	callback function after lazy loading	False
Owl.prev	To the next	Owl.next
Owl.play	Stop Auto Play	Owl.stop
Owl.goto	Skip to the first number without using animations	Owl.jumpto

Download

JQuery Owlcarousel Carousel