BxCarousel can specify the total number of elements to be displayed, and the number of elements to be rolled each time. It is automatically played, one button after the previous one controls the flow of images. bxw.usel is a Jquery image scrolling plug-in with many configurations and ease of use. The main features include:
◆ You can specify the total number of displayed elements.
◆ You can specify the number of elements to be rolled each time.
◆ Automatic playback Mode
◆ The previous/last button controls the image Flow
Parameter description:
Display_num: Number of display elements, number of images
Move: When you click the left and right control keys, the number of elements to move. Here, two images are moved.
Prev_image: the image of the previous button
Next_image: button image of the next element
Margin: gap between images, usually set to 10px
Auto: auto scroll Effect
Controls: whether to display the left and right control buttons. If this parameter is set to false, the left and right control buttons are not displayed.
Auto_hover: Specifies whether to stop image carousel when you hover your mouse over the carousel area.
BxCarousel usage and Configuration
First, the HTML code must conform to the following format:
The Code is as follows:
- First piece of content
- Second piece of content
- Third piece of content
- Fourth piece of content
- BxCarousel can accept an unlimited number of elements
The jQuery code must conform to the following format::
The Code is as follows:
$ (Document). ready (function (){
$ ('Ul '). bxCarousel ({
Display_num: 4, // number of elements to be visible
Move: 4, // number of elements to the shift the slides
Speed: 500, // number in milliseconds it takes to finish slide animation
Margin: 0, // right margin to be applied to each
Element (in pixels, although do not include "px ")
Auto: false, // automatically play slides without a user click
Auto_interval: 2000, // the amount of time in milliseconds between each auto animation
Auto_dir: 'Next', // direction of auto slideshow (options: 'Next', 'prev ')
Auto_hover: false, // determines if the slideshow will stop when user hovers over slideshow
Next_text: 'Next', // text to be used for the 'Next' control
Next_image: '', // image to be used for the 'Next' control
Prev_text: 'prev', // text to be used for the 'prev' control
Prev_image: '', // image to be used for the 'prev' control
Controls: true // determines if controls will be displayed
});
});
P. bx_container and p. html elements such as bx_wrap are generated and added by js. When using the bxCarousel plug-in, remember to use p to achieve visual aesthetic. bx_container and p. bx_wrap and its internal child elements are used to set the CSS Style.
Note that,
BxCarousel is an infinite loop mechanism. It keeps clicking the next button to see what has changed in html !!
BxCarousel not only applies to images, but also to any other html elements.
If the auto attribute is enabled, make sure that the speed attribute value is earlier than the duration.
Instance code:
The Code is as follows:
