Bootstrap Carousel

Bootstrap Carousel is the foundation of this slider, so first of all we will discus in detail.

01 - How to Create

The following example shows how to create a basic carousel

<body>

  <!-- Start Carousel -->
  <div id="myCarousel" class="carousel slide" data-interval="4000" data-pause="hover">

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner" role="listbox">

      <!-- First Slide -->
      <div class="carousel-item active">
        <!-- Slide Background -->
        <img src="image.jpg" alt="image" />
        <!-- Slide Text Layer -->
        <div class="carousel-caption">
          <h3>a nunc to</h3>
          <p>lorem 2020, ipsum out of sapien, consequa</p>
        </div>
      </div>
      <!-- End of Slide -->

      <!-- Second Slide -->
      <div class="carousel-item">
        <!-- Slide Background -->
        <img src="image.jpg" alt="image" />
        <!-- Slide Text Layer -->
          <div class="carousel-caption">
            <h3>wrisus 2020</h3>
            <p>lorem 2020, ipsum out of sapien, consequa</p>
          </div>
      </div>
      <!-- End of Slide -->

    </div<!-- End of Wrapper For Slides -->

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      
    </a>
  </div><!--End Carousel-->

>/body>

02 - explanation

We can divide Bootstrap Carousel HTML code structure into four parts

01 - OUTERMOST `</div>`

  <div id="myCarousel" class="carousel slide" data-interval="4000" data-pause="hover">
  
      <!-- All Other Carousel Data -->
  
  </div>

- First of all a carousel requires an id for carousel controls to function properly. As you can see above id="myCarousel".

- After that we assign .carousel class.

- .slide class implement the sliding effect.

- data-interval="4000" shows the delay between the slides. The value of data attribute is in in milliseconds. The default value of this attribute is 5000.

- data-pause="hover" stop the sliding on hover and start sliding when mouse pointer leaves the carousel

02 - INDICATORS

    <!-- Carousel Indicators -->
	
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

- Indicators are small circle shape dots similar to radio buttons

- This is an <ol>(Ordered List). This contains a carousel-indicators class

- data-target attribute points to the id of the carousel as shown in the above example #myCarousel.

- data-slide-to attribute shows that in which slide to go to, when clicking on the specific dot. The value of this attribute starts from 0

- .active class must be provided to first <li> to make slider functional.

03 - CAROUSEL-INNER `</div>`

    <!-- Wrapper for Slides -->
    <div class="carousel-inner" role="listbox">

      <!-- Slide -->
      <div class="carousel-item active">
	  
        <!-- Slide Background -->
        <img src="image.jpg" alt="image" />
		
        <!-- Slide Text Layer -->
        <div class="carousel-caption">
		
           <!-- All Slide Data -->
		   
        </div>

      </div>
      <!-- End of Slide -->

    </div> <!-- End of Wrapper For Slides -->

- This is core part of carousel, it contains all the slides data. We can divide this section into Two subsections.

Wrapper For Slides: All slides are closed into a <div> with class .carousel-inner
Slides: All data text, images, tables or forms etc of each slide is defined in a <div> with class .carousel-item. We can further divide this section into two subsections by default.
1. Background Image: First section of Slides is a <img>. This image always appears as background image in carousel by default.
2. Carousel Caption: This is a <div> with class .carousel-caption in this section place any optional HTML it will be automatically aligned and formatted.
  
  Note: We did not use <div> with class .carousel-caption in our product. We have created our own <div> for different HTML elements.

- To show first slide the .active class needs to be added to one of the slides in the .carousel-item section.

04 - Navigation Buttons

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      
    </a>

- This section is about the navigation buttons. These helps in moving next or previous slides

- This section creates two navigation buttons left and right

- If we talk about the code of each button you will find that it includes <a> with classes .carousel-control-prev or .carousel-control-next. Each <a> also contains two <span> tags. It is important that href attribute must have the carousel id that we have assigned above.

- First <span> contains the icon for the button. You can change the icons of the buttons from here easily.

03 - More

For further guideline just read the following complete tutorial about Bootstrap Carousel;

04 - Support

Please do not hesitate if you have any queries about this product. We are always there for your help. You can contact us on this e-mail address szthemes1@gmail.com