Spicing Up the Bootstrap Carousel with CSS3 Animations

Hello,

I’m trying out the CSS3 animations on my bootstrap carousel fullscreen slider as described in the article Spicing Up the Bootstrap Carousel with CSS3 Animations . The result looks fine and works properly.

But there is one thing I’ve lost:

The images are not sliding automatically anymore, so I have to manually slide with the left or right controls.

How can I re-establish the automatic slide effect without loosing the animations?

Thanks in advance.

Best regards, Pete

Mind posting your bootstrap HTML and CSS? Perhaps a website?

Hello,

sorry for that. Yes, of course I can:

As for the HTML:

<div id="carousel-example-generic" class="carousel slide carousel-fade">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-fade-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-fade-to="1"></li>
            <li data-target="#carousel-example-generic" data-fade-to="2"></li>
            <li data-target="#carousel-example-generic" data-fade-to="3"></li>
            <li data-target="#carousel-example-generic" data-fade-to="4"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img id="slider-image" src="images/Coffee_smoke.jpg" alt="slide1" class="img-responsive" />
              <div class="carousel-caption">
                <h3 id="h3_1" data-animation="animated bounceInLeft">Extremely Nice</h3>
                <h3 data-animation="animated bounceInRight">This is the caption for slide 1</h3>
                  <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>        
              </div>
            </div>
            <div class="item">
              <img id="slider-image" src="images/Restaurant.jpg" alt="slide2" class="img-responsive" />
              <div class="carousel-caption">
                <h3 data-animation="animated bounceInDown">Extremely Nice</h3>
                <h3 class="icon-container" data-animation="animated bounceInDown">
                  <span class="glyphicon glyphicon-heart"></span>
                </h3>
                  <button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>        
              </div>
            </div>
            <div class="item">
              <img id="slider-image" src="images/salt-water-cafe-churchgate.jpg" alt="slide3" class="img-responsive" />
              <div class="carousel-caption">
                <h3 data-animation="animated zoomInLeft">Extremely Nice</h3>
                <h3 data-animation="animated flipInX">This is the caption for slide 3</h3>
                  <button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>        
              </div>
            </div>
            <div class="item">
              <img id="slider-image" src="images/Interior_Cafetería.jpg" alt="slide1" class="img-responsive" />
              <div class="carousel-caption">
                <h3 data-animation="animated bounceInLeft">Extremely Nice</h3>
                <h3 data-animation="animated bounceInRight">This is the caption for slide 4</h3>
                  <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>        
              </div>
            </div>
            <div class="item">
              <img id="slider-image" src="images/cafe1.jpg" alt="slide1" class="img-responsive" />
              <div class="carousel-caption">
                <h3 data-animation="animated zoomInLeft">Extremely Nice</h3>
                <h3 data-animation="animated flipInX">This is the caption for slide 5</h3>
                  <button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>        
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

And the CSS looks like this:

.carousel-indicators {
    bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
    background-image: none;
}

/* Caption */
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
    background-color: rgba(255, 106, 0, 0.78);
    border: none;
}
.carousel-caption h3 {
    padding: .5em;
}
.carousel .icon-container {
    display: inline-block;
    font-size: 25px;
    line-height: 25px;
    padding: 1em;
    text-align: center;
    border-radius: 50%;
}
.carousel-caption button {
    margin-top: 1em; 
}
/* End Caption */

/* Animation delays */
.carousel-caption h3:first-child {
    animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
    animation-delay: 2s;
}
.carousel-caption button {
    animation-delay: 3s;
}

I changed the slide effect to fade effect with css, like so:

/*
    Bootstrap Carousel to Fade instead of slide
    */
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

I don’t think that the fade effect is the reason for the automatic fading or sliding, because changing it to slide the problem still remains.

finally the JS:

//--------------- Bootstrap Carousel --------------------//

var $myCarousel = $('#carousel-example-generic');
 
// Initialize carousel
$myCarousel.carousel();({
  interval: 5000
})

/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
function doAnimations(elems) {
  var animEndEv = 'webkitAnimationEnd animationend';
   
  elems.each(function () {
    var $this = $(this),
        $animationType = $this.data('animation');
 
    // Add animate.css classes to
    // the elements to be animated
    // Remove animate.css classes
    // once the animation event has ended
    $this.addClass($animationType).one(animEndEv, function () {
      $this.removeClass($animationType);
    });
  });
}
 
// Select the elements to be animated
// in the first slide on page load
var $firstAnimatingElems = $myCarousel.find('.item:first')
                           .find('[data-animation ^= "animated"]');
 
// Apply the animation using our function
doAnimations($firstAnimatingElems);
 
// Pause the carousel
$myCarousel.carousel('pause');
 
// Attach our doAnimations() function to the
// carousel's slide.bs.carousel event
$myCarousel.on('slide.bs.carousel', function (e) {
  // Select the elements to be animated inside the active slide
  var $animatingElems = $(e.relatedTarget)
                        .find("[data-animation ^= 'animated']");
  doAnimations($animatingElems);
});

//---------------- End Bootstrap Carousel ---------------------//

Hope this will help to understand better what I’m referring to.

Thanks a lot.

Regards, Pete

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

Hi Pete,

There’s nothing wrong with the carousel not cycling automatically. This was my intention when I wrote the code. The line that causes this to happen is this:

// Pause the carousel
$myCarousel.carousel('pause');

As I explained in the article, it could annoy users to have the carousel automatically cycling while animated elements keep jumping around (or fading in an out as the case may be). However, if this is what you’re looking for, comment out that line of code and see the result.

I also pointed out in the article that if you go for the automatic cycling of the carousel, you should make sure the delay between one slide disappearing and the next becoming visible is long enough to allow all animations on the active slide to take place.

Hi,

thanks for your reply and also sorry, because of hurry I didn’t follow strictly the instructions in your article.

I commented out the line of code to pause the carousel as suggested and everything works perfectly even without considering any timing or delay issue.

Don’t know if this is the right forum here to ask those questions but there is another issue I’m facing with the bootstrap carousel and I wonder if you could help me out with that:

As I said in my first question I’m using the bootstrap carousel as a fullscreen slider for my homepage. On the top of my homepage I inserted a fixed navigation navbar. So I’m detecting two things regarding responsiveness.

  1. The carousel images are not covering the full height on smaller devices (approx. half of the screen). I thought that this could be because of the aspect ratio. But is there any possibility to get the images covering the full height on smaller screens like iPhone etc.?

  2. The captions are not visible properly on smaller devices. They are going out of the image height because of problem
    one. So I tried to change their position by using the css position method with top and left values, like so:

    .carousel-caption {
    position: absolute;
    top: 20%;
    }

but it does not help.

When working with padding or margin, the captions are going behind the navbar on smaller devices. I tried e.g.:

.carousel-caption {
    padding-bottom: 15%;
}

but I’m not able to achieve the captions properly visible.

Any help would be appreciated.

Kind regards, Pete

Hi Pete,
Is there a URL I can access to see your website? If not, could you let me know the dimension of your images, so that I can somehow reproduce the problem?
In the meantime, I’ll have a closer look at your code today and get back to you :slight_smile:

Hi Pete,
Here’s what I’ve come up with so far. If you want to use a full-screen carousel, one option is a background image, and in this case you could apply the background-size property and set it to cover. This will get the image to scale nicely when the screen is resized.

If you want to use the img tag, you can get the image to cover the page both in large and in small screens, but I don’t like how it scales. Here’s what I did.

html, body {
    min-height: 100%;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.carousel-fade,
.carousel-fade .carousel-inner,
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .item img {
    min-height: 100%;
    height: 100%;
    margin: 0;
    width: 100%;
}

This code succeeds in keeping the carousel full width, but I can’t see how it’s possible to keep the image’s aspect ratio properly because of the varying screen height and width measurements. I think background images would look better for this. Let me know what you think.

Hi,

again, thanks for the quick reply.

Sorry that I cannot provide an URL, as I’m at the very beginning of the creation of the website trying on localhost.
The Dimensions for the background-images are 1600x800px, which are the dimensions of my laptop’s screen.

As for the solutions you provided:

For html and body, I tried already the same code:

html, body {
    margin: 0;
    padding: 0;
    font-family: Raleway, Gruppo, sans-serif;
    font-size: 18px;
    min-height: 100%;
    height: 100%;
    width: 100%;
}

So I tried out the 100% values for the carousel. I think I also tried already something similar before, but cannot remember exactly how.

The point is that the images are now covering the full height and the captions are perfectly visible resizing the screen, but the images look squeezed in terms of width.I would say that the problem is definitely because of the aspect ratio.

So I wanted to ask you what do you mean by “background-images would look better for this”? Is there another - totally different - solution for this issue?

Thanks a lot for getting involved with that problem.

Kind regards, Pete

Btw: I’ve seen Bootstrap themes using fullscreen background images where resizing works properly.

Hi Pete,
Yes, as I suggested above, I think background images, rather than the img tag in the markup, work better when changing the screen size. If browsers can be of any size and the img is full width and full height, nothing guarantees that the aspect ratio will be respected.

Using background images mitigates this problem because you can use background-size: cover to the background image in your CSS. This ensures that the image scales properly on screen resize.

I hope this helps :slight_smile:

Hi Antonella,

now I understand what you meant by using the (css) background-image property rather than the (html) img tag.

So, I was playing around a little bit with this alternative and the result is satisfactory, although there is no possibility at all to get the images full-height AND responsive using background-size property (with background-size: cover; the images maintain there dimensions but captions, indicators and controls are going out of view; and with background-size: contain; the images look squeezed).

Right now I’m using this to get the carousel look fine on any screen size:

.carousel-fade, 
.carousel-fade .carousel-inner, 
.carousel-fade .carousel-inner .item, 
.carousel-fade .carousel-inner .item img { 
    min-height: 100%; 
    height: 100%; 
    margin: 0; 
    width: 100%; 
}

.carousel-fade .carousel-inner .one {
    background-image: url("../images/image1.jpg");
    opacity: 0;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .two {
    background-image: url("../images/image2.jpg");
    opacity: 0;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .three {
    background-image: url("../images/image3.jpg");
    opacity: 0;
    transition-property: opacity;
}

This way captions, indicators and controls of the carousel are in the right place and have the right dimensions on screen resize.

Thankss a lot for taking the time to help out with that.

Kind regards, Pete

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.