Bootstrap Carousel Plugin
The Carousel Plugin
The Carousel plugin is a component for cycling through elements, like a carousel [slideshow].
Tip: Plugins can be included individually [using Bootstrap's individual "carousel.js" file], or all at once [using "bootstrap.js" or "bootstrap.min.js"].
Carousel Example
Previous
Next
Example Explained
The outermost Carousels require the use of an id [in this case id="myCarousel"] for carousel controls to
function properly. The class="carousel"
specifies that this The .slide
class adds a CSS transition and animation effect, which makes the items slide
when showing a new item. Omit this class if you do not want this effect. The data-ride="carousel"
attribute tells Bootstrap to begin animating the carousel immediately when the page loads. The "Indicators" part: The indicators are the little dots at the bottom of each slide [which indicates how many slides there are in the
carousel, and which slide the user is currently viewing]. The indicators are specified in an ordered list with class .carousel-indicators. The data-target attribute points to the id of the carousel. The data-slide-to attribute specifies which slide to go to, when clicking on the specific dot. The "Wrapper for slides" part: The slides are specified in a The content of each slide is defined in a The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible. The "Left and right controls" part: This code adds "left" and "right" buttons that allows the user to go back and
forth between the slides manually. The data-slide attribute accepts the keywords "prev" or "next", which alters the slide position
relative to its current position. Add For a complete reference of all carousel options, methods and events, go to our
Bootstrap JS Carousel Reference.Add Captions to Slides
Example
Previous
Next
Complete Bootstrap Carousel Reference
Video liên quan
Chủ Đề