Flexslider is a very good jquery sliding switch plugin

Source: Internet
Author: User

Flexslider is a very good jquery sliding switch plug-in that supports all major browsers and has a fade-out effect. Suitable for all beginner and advanced web designers. But many people just use the default parameters, today to say the specific parameters to show you!

$(window).Loadfunction () {
$('. Flexslider ').Flexslider ({
Animation"Fade",String:select your animation type, "Fade" or "slide" image transformation mode: Fade in or slide
Slidedirection:"Horizontal",String:select the sliding direction, the "horizontal" or "vertical" picture is set to the sliding direction when sliding: Left or right or up or down
Slideshow:TrueBoolean:animate slider automatically automatically play when loading a page
Slideshowspeed:7000,Integer:set the speed of the slideshow cycling, in milliseconds auto play in milliseconds
Animationduration:600,Integer:set the speed of animations, in milliseconds animation fade effect delay
Directionnav:TrueBoolean:create navigation for Previous/next navigation? (True/false) Whether the left and right control buttons are displayed
Controlnav:TrueBoolean:create navigation for paging control of each clide? Note:leave true for Manualcontrols usage whether the Control menu is displayed
Keyboardnav:TrueBoolean:allow slider navigating via keyboard left/right keys key keyboard control picture swipe
MouseWheelFalseBoolean:allow slider navigating via MouseWheel mouse wheel control picture sliding
Prevtext:"Previous",String:set the text for the "previous" Directionnav item
Nexttext:"Next",String:set the text for the "Next" Directionnav item
Pauseplay:FalseBoolean:create Pause/play Dynamic Element
Pausetext:' Pause ',String:set the text for the "pause" Pauseplay item
Playtext:' Play ',String:set the text for the "Play" Pauseplay item
RandomizeFalseBoolean:randomize Slide If the order is immediately slide
Slidetostart:0,Integer:the slide that the slider should start on. Array notation (0 = first slide) Initializes the display picture position
Animationloop:TrueBoolean:should the animation loop? If False, Directionnav will received ' disable ' classes at either end whether to cycle the scroll
Pauseonaction:TrueBoolean:pause the slideshow when interacting with control elements, highly recommended.
Pauseonhover:FalseBoolean:pause the slideshow when hovering on slider, then resume when no longer hovering
Controlscontainer:"",Selector:declare which container the navigation elements should be appended too. Default container is the flexslider element. Example use would is ". Flexslider-container", "#container", etc. If the given element is not found, the default action would be taken.
Manualcontrols:"",Selector:declare custom Control navigation. Example would be ". Flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlnav should match the number of Slides/tabs. Custom Control Navigation
Manualcontrolevent://string: Custom navigation control Trigger event: Default is click, you can set hover
start: function () {}, //callback:function (slider)-Fires When the slider loads the first slide
before: function () {}, Span style= "color: #a50;" >//callback:function (slider)-Fires asynchronously with each slider animation
after: Span style= "color: #708;" >function () {}, //callback:function (Slider)-Fires after each slider animation completes
end: function () {} // Callback:function (Slider)-Fires When the slider reaches the last slide (asynchronous)

});
});

Flexslider is a great jquery sliding switch plugin

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.