Free Blogger Tutorial

Bootstrap 4 Carousel

Bootstrap 4 carousel is a better component than a jumbotron. These two components have a similar function in conveying information to readers and compatible to be installed on blogger or blogspot themes. A carousel can provide more advantages in gaining the extra attention to some special content or information with its slideshow element that cycles through a set of web content. It is established with CSS 3D transforms, which is able to display a number of images, contents and a custom-made markup. On the hand, a jumbotron component is a static component which displays a single image.

By default, any Bootstrap 4 carousel component is not compatible to ready-made free blogger themes or other free blog sites, unless the blogger templates are equipped with Bootstrap 4 CSS framework. We have tested many Bootstrap carousel snippets on our Bootstrap 4 theme blog sites. We found that the carousels can be installed without any issues such as "blank space between slides", "Bootstrap 4 Carousel sliders not working" or "Bootstrap carousel causes mobile page to jump up". Based on our finding, we recommend Getboostrap and MDBootstrap bootstrap v4.5 carousels, which are easy to install to a blogger with a minimum adjustment, responsive to any screen sizes and suitable for header, content and footer sections.

First slide label

Description for the first slide

First slide label

Description for the first slide

First slide label

Description for the first slide

Basic Example

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="Insert URL here" class="d-block w-100" alt="Image Title">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Description for the first label</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="Insert URL here" class="d-block w-100" alt="Image Title">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Description for the second label</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="Insert URL here" class="d-block w-100" alt="Image Title">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Description for the third label</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Bootstrap 4 Carousel Code Snippet

The code snippet for the above carousel is a basic bootstrap v4.5 carousel which is available at Getbootstrap website. Available changes that can be made to the carousel elements to meet theme design are listed below.

How To install

This carousel code snippet is easy to install. You need to copy the entire HTML markup above and paste it to any section of your post. Then start adding your content.

Where To Install

Bootstrap 4 carousel is flexible and suitable on any area of blog such as header, content and footer. In order to control the view size display and the width of the carousel, the carousel code snippet needs to be placed in a proper grid system.

Change the carousel design

There are 3 carousel elements you can change or delete from the above HTML markup to meet your theme design.

Control - previous and next <button> elements.
Indicator - indicates position sequence of the displayed slide.
Slide Captions - title and description on the slide.

There are 3 carousel elements you can add to the carousel.

Crossfade - change slide animation to fade transition by adding .carousel-fade as shown in the example below.

<div id='carouselExampleFade' class='carousel slide carousel-fade' data-bs-ride='carousel'>...</div>
Sliding time interval - assign time delay between automatic slide cycling by adding data-bs-interval='xxxx' to a .carousel-item as shown in the example below.

<div class='carousel-item active' data-bs-interval='10000'><img src='...' class='d-block w-100' alt='...'></div>
Disable slide touch swipe - disable carousel swiping support on the touchscreen devices by adding data-bs-touch='false'. In the example below, carousel autoplay support is also disabled with the data-bs-interval='false' attribute.

<div id='title' class='carousel slide' data-bs-touch='false' data-bs-interval='false'>..</div>

Background Image And Content

The background images of the carousel can be replaced with other items such as background-color, git or video by changing the CSS element within the inline-styling in <div class='carousel-item' style="width: 100%; background-image: url('IMAGE URL');...>.

The carousel content such as title and description can be hide from all type of screen views by deleting the entire part of <div class='carousel-caption mt-2'>. Other method to hide content is by adding a display properties of "d-none" in <div class="col-12">, or selectively you can hide the content from small screen view only by applying "d-none d-md-block"

CSS3 Transition and Animation

In our examples, we use basic Bootstrap 4 carousel CSS3 transition and animation, such as "carousel slide" and "carousel slide carousel-fade" elements. There are many more external carousel CSS3 transition and animation which are more interesting. However, these carousel sliding effects may require additional CSS3 file and a bit of javascript. You can visit Kenwheeler Github Page for a various examples of "slick" sliding effects.

Uneven Sliding Image Issue

A common issue with Bootstrap carousel, which is a result of a use of a set of images with different sizes. This issue displays sliding images with different height for each size of image such as square, potrait and landscape image similar to the effect of image aspect ratio.

There are 2 recommendations to overcome this issue.

Use images with a same size - a suitable dimension for carousel image is 858px for width and 644px for height.
Picasa image size attribute - Picase image size can be determined by adding 'w858-h644-p' in image URL regardless of the actual image size as shown below.

https://lh3.googleusercontent.com/w858-h644-p/name.jpg

What else Bootstrap 4 Carousel Offers?

Bootstrap 4 carousel example that we share in this post are a basic carousel, which is meant to give a general idea to install the component on free blog sites. There are many interesting carousel designs such as a full-width carousel, a carousel slider with thumbnails and multiple items responsive carousel. You can find these free carousel code snippets and many other designs at mobirise.com. Bootstrap 4 carousel can make your blog sites look elegant and interesting, and in the same time, it attracts readers' attention to your important content. Hence, it may result in more click and visit to other posts.