logo

Welcome to

paradise

We would like to thank you for purchasing Paradise Slider!
We are very pleased that you have chosen Paradise Slider for your Project.

Buy Now

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.

  1. Wrapper For Slides: All slides are closed into a <div> with class .carousel-inner

  2. 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