Amazeui Picture Carousel

Source: Internet
Author: User

Amazeui personal feeling is really pretty good, although now is not particularly perfect, but after all, is the first domestic, used to better meet the people.

Today to talk about is the picture carousel, feel this should be able to help everyone, then this finishing.

<! DOCTYPE html>The file referenced above can actually not need that much, but it is the file in the official file. 

Primarily the properties of a control

{
Animation: "Slide",//String: ["Fade" | " Slide "], animation effect
Easing: "Swing",//String: Scrolling animation timing function
Direction: "Horizontal",//String: Scrolling Direction ["Horizontal" | " Vertical "]
Reverse:false,//Boolean: Flips Slide Motion Direction
Animationloop:true,//Boolean: whether to loop playback
Smoothheight:false,//Boolean: When slide picture proportions are different
"True": Parent class automatically adapts to picture height
"False": does not automatically adapt, the parent class height is the highest height of the picture, the default is False

startat:0,//Integer: Start playing the slide, counting starting from 0
Slideshow:true,//Boolean: whether to play automatically
slideshowspeed:5000,//integer:ms scrolling interval time
animationspeed:600,//Integer:ms animation scrolling speed
initdelay:0,//integer:ms delay of first execution of animation
Randomize:false,//Boolean: whether random slide order

Usability features
Pauseonaction:true,//Boolean: Stop AutoPlay when user is working
Pauseonhover:false,//Boolean: Pause AutoPlay on hover
Usecss:true,//Boolean: Whether to use CSS3 transition
Touch:true,//Boolean: Allows touch screen touch slide slider
Video:false,//Boolean: Use the video slider to prevent CSS3 3D transform glitches

Primary Controls
Controlnav:true,//Boolean: Whether to create a control point
Directionnav:true,//Boolean: Whether to create the up/Next button (Previous/next)
Prevtext: "Previous",//String: Previous button text
Nexttext: "Next",//String: Next button text

Secondary Navigation
Keyboard:true,//Boolean: Whether to turn on keyboard left (←) Right (→) control
Multiplekeyboard:false,//Boolean: Whether the keyboard is allowed to control multiple slide
Mousewheel:true,//Boolean: Whether mouse wheel control is turned on
Pauseplay:false,//Boolean: Whether to create a pause and play button
Pausetext: ' Pause ',//String: Pause button text
Playtext: ' Play ',//String: Play button text

Special properties
Controlscontainer: "",//JQuery Object/selector
Manualcontrols: "",//JQuery Object/selector The elements of the custom control slider,
Like "#tabs-nav li img", the number of navigation is the same as the number of slide
Sync: "",///Selector: The operation between the associated slide and slide.
Asnavfor: "",//Selector:internal property exposed for turning the slider into a thumbnail navigation For another slider

Carousel Options
itemwidth:0,//integer:slide width, multiple simultaneous scrolling settings
itemmargin:0,//Integer:slide pitch
Minitems:1,//Integer: Minimum display of slide, related to ' itemwidth '
maxitems:0,//Integer: Displays up to slide number, related to ' itemwidth '
move:0,//Integer: Number of slide for one scroll move, 0-scrolling visible slide

Callback API
Start:function () {},//Callback:function (slider)-Initialization completed callback
Before:function () {},//Callback:function (slider)-Callback before each scrolling start
After:function () {},//Callback:function (slider)-callback after each scroll is completed
End:function () {},//Callback:function (slider)-Executes the callback to the last slide
Added:function () {},//Callback:function (slider)-slide triggered when added
Removed:function () {}//Callback:function (slider)-triggered when slide is removed

Amaze UI Extension Parameters
Playafterpaused:null//Integer:ms The user stops the operation for how long to start the AutoPlay again
}

The effect is as follows, very good effect, the code is very few, easy to understand.


Amazeui Picture Carousel

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.