Bootstrap | Carousel

In this article, we will see how to create an image slide show for your webpage to make it look more attractive. For this we will use bootstrap Carousel.

It can be included into your webpage using “bootstrap.js” or “bootstrap.min.js”. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect.

This is how we can create a image slideshow using bootstrap carousel

Examples of the above written code:

div style="width: 665px;" class="wp-video">

Explanation of The Above Code :-

  • The “Wrapper for slides” part : The slides are specified in a div with class=”carousel-inner”.The content of each image in a slideshow is defined in a div tag with class=”item”. This can be text or images.The class=”active” is added to one of the slides. Otherwise, the images of the slideshow will not be visible.
  • The outermost div : The class=”carousel” tells us that this div tag contains a carousel.The class=”carousel-slide” adds a CSS transition and animation effect to the images,thus making them slide when showing a new item. If you do not want this effect,then do not put this class.The data-ride=”carousel” attribute tells Bootstrap to begin the slideshow 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, and which slide we are 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 which are given to their numbers appearing in the slideshow. The data-slide-to attribute makes the image slide the image it has been assigned to, when clicking on the specific dot.
  • The “Left and right controls” part : This code adds “left” and “right” buttons that allows the us to go back and forth between the slides manually. The data-slide attribute accepts the keywords “prev” or “next”, which changes the slide position against its current position.

To Add Caption to the Slide

Add class=”carousel-caption” within each div class=”item” to create a caption for each slide.

Usage of Carousels with the help of Javascript

Just call the carousel() method with the id or class selector of the wrapper element in your JavaScript code.

Options :
Their are certain options that we can use with this carousel() in JavaScript for the control of the images that in how much time they are going to change etc.

  1. CYCLE :- It cycles through the carousel from left to right
  2. PAUSE :- Stops the carousel from moving where ever you want
  3. NUMBER :- It cycles the carousel according to a particular frame(starting from 0, just like in array)
  4. PREV :- Cycles the carousel to its previous image,its just like we did earlier in the bootstrap part
  5. NEXT :-Cycles the carousel to its next image,its same as we did in the bootstrap part of carousel

This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment



load comments

Subscribe to Our Newsletter