Using plugin owlcarousel in jQuery slideshow (detailed tutorial)

jQuery slideshow plug-in owlcarousel is a small, powerful and highly compatible slideshow plug-in, compatible with all browsers above IE6. This article mainly introduces the use of words, Chinese parameters and API instructions

Owl Carousel is A powerful, practical but compact jQuery slideshow plug-in, it has the following features:

• Compatible with all browsers

• Supports responsiveness

• Support CSS3 excessive

• Support touch events

• Support JSON and custom JSON format

• Support progress bar

• Support custom events

• Support delayed loading

• Support adaptive height

Browser compatibility: Compatible with all browsers, including IE6 and IE7.

jQuery Compatibility: Compatible with versions 1.7 and above.

How to use Owl Carousel:

Create a new HTML file

1. Introduce the necessary files for Owl Carousel into the HTML file

<link href="css/owl.carousel.css" rel="external nofollow" rel="stylesheet">
<link href="css/owl.theme.css" rel="external nofollow" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

2. HTML code

<p id="owl-demo" class="owl-carousel">
 <p>1</p>
 <p>2</p>
 <p>3</p>
 <p>4</p>
 <p>5</p>
 <p>6</p>
 <p>7</p>
 <p>8</p>
</p>

3. JavaScript

$(function(){
 $('#owl-example').owlCarousel();
});

The following are the Chinese parameters and api description of Owl Carousel:

##baseClassStringowl-carouselAdd CSS, if not needed, it is best not to use themeStringowl-themeTheme style, you can add it yourself to meet your requirementslazyLoadBoolean valuefalse Lazy loadinglazyFollowBoolean valuetrueWhen using paging, if it spans pages When browsing, pictures that skip pages will not be loaded, only pictures of the page to be displayed will be loaded. If set to false, pictures that skip pages will be loaded. This is the sub-option of lazyLoadlazyEffectBoolean value/stringfadeThe display effect of delayed loading images, The default is 400 milliseconds to fade in. If it is false, the effect will not be usedloopBoolean valuefalseInfinite loopautoHeightBoolean valuefalseAutomatically use height##jsonPathjsonSuccessdragBeforeAnimFinishmouseDragmargintouchDragaddClassActivetransitionStyle

owlcarousel callback function

Parameters	Type	Default value	Description
items	Integer	5	The number of slides visible per page
itemsDesktop	Array	[1199,4]	Set the browser width and the number of visible slides, the format is [X,Y], X is the browser width, Y is the number of visible slides, such as [1199,4] means that if the browser width is less than 1199, 4 images will be displayed per page. This parameter is mainly used for responsive design. You can also use false
itemsDesktopSmall	Array	[979,3]	Same as above
itemsTablet	Array	[768,2]	Same as above
itemsTabletSmall	Array	false	Same as above, the default is false
itemsMobile	Array	[479,1]	Same as above
itemsCustom	array	false
singleItem	Boolean value	false	Whether to display only one item
itemsScaleUp	Boolean value	false
slideSpeed	Integer	200	Slide switching speed, In milliseconds
paginationSpeed	Integer	800	Pagination switching speed, in milliseconds
rewindSpeed	Integer	1000	Rewind speed in milliseconds
autoPlay	Boolean value/integer	false	Auto play, optional Boolean value or integer, if an integer is used, such as 3000, it means switching once every 3 seconds; if set to true, The default is to switch once every 5 seconds
stopOnHover	Boolean value	false	Hover the mouse to stop automatic play
navigation	Boolean value	false	Display "previous" and "next"
navigationText	Array	["prev","next"]	Set the "previous" and "next" text, the default is ["prev"," next”]
rewindNav	Boolean value	true	Slide to the first
scrollPerPage	Boolean value	false	Scroll per page instead of per item
pagination	Boolean value	true	Display pagination
paginationNumbers	Boolean value	false	Paging button displays numbers
responsive	Boolean value	true
responsiveRefreshRate	Integer	200	Detect the window width every 200 milliseconds and make corresponding adjustments, mainly used for responsive
responsiveBaseWidth	jQuery Selector	window
String	false	JSON file path
Function	false	Function to process custom JSON format
Boolean value	true	Ignore whether it is excessive Done (drag only)
Boolean	true	Turn off/on mouse events
Integer	0	Slide spacing
Boolean value	true	Turn off/on touch events
Boolean value	false	Add the "active" class to visible items
String	false	Add CSS3 Over effects

Variable	Type	Default value	Description
beforeUpdate	Function	false	Callback function after response
afterUpdate	Function	false	Callback function before response
beforeInit	Function	false	Callback function before initialization
afterInit	Function	false	Callback function after initialization
beforeMove	Function	false	Callback function before move
afterMove	Function	false	Callback function after move
afterAction	Function	false	Callback function after initialization
startDragging	Function	false	Drag callback function
afterLazyLoad	Function	false	Callback function after delayed loading

owlcarousel custom event

##EventDescriptionowl.prevGo to the previous oneowl.nextGo to the next one A owl.play automatically plays, you can pass a parameter as the playback speed##owl.stopowl.goToowl.jumpToThe above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Stop automatic play
Jump to the number
Never use animation to jump to the next number

Related articles:

How to download images in node.js

How to use eventBus in vue to implement sibling components Communication

How to implement a custom pie chart (Echarts) component in vue2.0

The above is the detailed content of Using plugin owlcarousel in jQuery slideshow (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!