In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.