Powerful and practical jquery Slideshow Plugin Owl Carousel

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