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

This article mainly shows you "how to use Flexslider to achieve picture rotation, text and pictures combined with sliding switching effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use Flexslider to achieve picture rotation, text and pictures combined with sliding switching effect" this article.

Flexslider is a content scrolling plug-in based on jQuery. It allows you to easily create content scrolling effects, with a very high customizability. Developers can use Flexslider to easily create a variety of image rotation effects, focus map effects, picture-text mixed scrolling effects.

Flexslider has the following characteristics:

Support for sliding and fading in and out effects. Support horizontal and vertical sliding. Support keyboard key control. Support for touch sliding. Support mixed layout of picture and text, support a variety of html elements. Adaptive screen size. The number of sliding units can be controlled. More option settings and callback functions.

HTML

First load the jquery library file and the Flexslider plug-in in the head part of the page, as well as the basic css style file required by Flexslider.

Then add the following HTML code to body:

We used .flexslider to include all the content elements that need to be scrolled, and then it is critical to use this class, the internal scrolling content is for .slides, and then add any html elements inside, including images and text.

JQuery

Calling the Flexslider plug-in is very simple, using the following code:

(function () {$(".flexslider") .flexslider ();})

Then preview the web page effect, a content switching effect is completed, of course, want more personalization, flexslider provides a wealth of options configuration and callback functions can definitely meet the needs of most developers.

Flexslider option Settings

Parameter description default animation animation effect type, there are "fade": fade out, "slide": slide "fade" easing content switching slow effect, need jquery easing plug-in to support "swing" direction content scrolling direction, there are "horizontal": horizontal direction and "vertical": vertical "horizontal" animationLoop cycle the starting position of truestartAt initial sliding Locate whether to slide 0slideshow from the beginning automatically slide trueslideshowSpeed slide content display time (ms) 7000animationSpeed content switching time (ms) 600initDelay initialization delay time when 0pauseOnHover mouse slides to scroll content Whether to pause scrolling falsetouch whether to support touching and sliding truedirectionNav whether to display left and right arrow buttons truekeyboard whether to support keyboard arrow operation trueminItems minimum number of units to display sliding content at a time 1maxItems maximum number of units to display sliding content at a time 0move number of units to slide 0 callback function start: function () {}, before: function () {}, after: function () {}, end: function () {}, added: function () {} Removed: function () {}, init: function () {}-

The above is "how to use Flexslider to achieve picture rotation, text and pictures combined with sliding switch effect" all the content of this article, thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.