jQuery jFlow 介绍
jFlow is a widget to make your content slides. One popular alternative that
exists out there is coda-slider. jFlow is super lightweight because it is only
1.9kb minified!!!.
$("#myController").jFlow({ slides: "#mySlides", width: "99%", height: "200px", duration: 400 });
Explanation:
#myController: the div where all the slide controller are nested in slides: the div where all your sliding divs are nested in (note: you can define classes for each div inside slides) width: can be specified in px or % (required) height: can be specified in px (required) duration: time in miliseconds to transition one slide (optional, default is 400)
2 divs created by jFlow as containers, you can style them to your liking
#jFlowSlide: This is the container where all the slides reside .jFlowSelected: This is the current activated controller
Special div definition
.jFlowPrev: Any element with this class will transition to previous slide upon clicking .jFlowNext: Any element with this class will transition to next slide upon clicking .jFlowControl: Any element inside the controlling div with this class will map to the corresponding slide
Example
`
Prev
Next`