Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you about the jQuery slide plug-in owlcarousel parameters how to use the relevant knowledge points, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Owl Carousel is a powerful, practical, but compact jQuery slide plug-in that has the following features:

Compatible with all browsers

Support response type

Excessive support for CSS3

Support for touch events

Support JSON and custom JSON format

Support for progress bar

Support for custom events

Support for delayed loading

Support for adaptive height

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

JQuery compatibility: compatible with version 1.7 and above.

How to use Owl Carousel:

Create a new HTML file

1. Introduce Owl Carousel required files into HTML files.

2. HTML code

1 2 3 4 5 6 7 8

3 、 JavaScript

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

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

The default value of the parameter type indicates that items Integer 5 slides can be seen per page itemsDesktop Array [1199Magin4] sets the browser width and the number of slides visible in the format [XMague Y], X is the browser width, Y is the visible number, such as [1199Mague 4] is if the browser width is less than 1199, each page displays 4, this parameter is mainly used for responsive design. You can also use the falseitemsDesktopSmall array [979 falseitemsDesktopSmall 3] ditto itemsTablet array [768 pr 2] ditto itemsTabletSmall array false, defaulting to falseitemsMobile array [479 dint 1] ditto itemsCustom array false.

Does singleItem Boolean false display only one itemsScaleUp Boolean false?

SlideSpeed integer 200slide switching speed, paginationSpeed integer 800paging switching speed in milliseconds, rewindSpeed integer 1000 return speed in milliseconds, autoPlay Boolean value / integer false automatic playback in milliseconds, optional Boolean value or integer. If you use an integer, such as 3000, it means a switch in 3 seconds. If set to true, the default is 5 seconds to switch stopOnHover Boolean value false mouse over to stop automatically playing navigation Boolean value false display "previous" and "next" navigationText array ["prev", "next"] set "previous" and "next" text The default is ["prev", "next"] rewindNav Boolean true slides to the first scrollPerPage Boolean false scrolling per page instead of each item scrolling pagination Boolean true display paging paginationNumbers Boolean false paging button displays the number responsive Boolean true

ResponsiveRefreshRate integer 20000 detects the window width every 200ms and adjusts accordingly, mainly for responsive responsiveBaseWidthjQuery selector window

BaseClass string owl-carousel add CSS, if not necessary, it is best not to use theme string owl-theme theme style, can be added to meet your requirements lazyLoad Boolean value false delay loading lazyFollow Boolean value true when using paging, if the cross-page browsing, will not load skip the page of the picture, only load to display the page of the picture, if set to false, it will load skip the page of the picture. This is the lazyLoad sub-option lazyEffect Boolean value / string fade delay loading picture display effect, the default is 400ms fade in If false does not use effect loop Boolean false infinite loop autoHeight Boolean false automatically uses height jsonPath string falseJSON file path jsonSuccess function false handles functions in custom JSON format dragBeforeAnimFinish Boolean true ignores excessive completion (drag only) mouseDrag Boolean true off / on mouse event margin integer 0 slide spacing touchDrag Boolean true off / on touch event addClassActive Boolean false to visible items Add "active" class transitionStyle string false to add CSS3 excessive effect

Owlcarousel callback function

The default value of the variable type indicates the callback function after the beforeUpdate function false response, the callback function before the false response, the callback function before false initialization, the callback function after false, the callback function after false movement, the callback function after false, the callback function after false initialization, the callback function dragged by false, the callback function, afterLazyLoad function, false delayed loading, callback function.

Owlcarousel Custom event

Event description owl.prev to the previous owl.next to the next owl.play automatic playback, can pass a parameter as the playback speed owl.stop stop automatic playback owl.goTo jump to a few owl.jumpTo without animation to jump to more than a few is "jQuery slide plug-in owlcarousel parameters how to use" all the content of this article, thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.