HTML & CSS
Article

Spicing Up the Bootstrap Carousel with CSS3 Animations

By Maria Antonietta Perna

Adding a slider or carousel to showcase content on a website is a common client’s request for developers. The amount of free and premium carousel plugins available is overwhelming, and a good many of them offer many useful configuration options and dynamic effects.

There are times, however, when a lightweight carousel with minimal options is all you need. In this case, if your project uses Bootstrap, the popular open source front-end framework, you won’t need to look any further than the Bootstrap Carousel component.

In this article, I’m going to show how to add some fun animation effects to the Bootstrap Carousel, while still making sure this handy JavaScript component remains bloat-free and quick to implement.

Introducing Animate.css

As rewarding as crafting my own animation effects can be, I’m going to use a well-known open source CSS3 animation library most aptly called Animate.css, by Dan Eden.

This is so that I can focus on the task at hand, rather than on explaining the code for CSS3 animations. However, if you want to delve into that topic, you’ll enjoy the CSS3 Animations series here on SitePoint, by Craig Buckler.

Using Animate.css requires two steps:

  1. Include animate.min.css in the section of your HTML document.
  2. Add the classes of animated yourchosenanimation to the elements you intend to animate on your web page.

In the latter step you would replace “yourchosenanimation” with the class name corresponding to any of the numerous animations you see on the Animate.css website.

The Bootstrap Carousel component has three main sections:

  • The Carousel indicators track the overall number of slides, give users a visual clue of the position the slide currently being viewed occupies, and offer an alternative navigation for the slider.
  • The Carousel item, located inside a wrapper container with a class of .carousel-inner, represents each individual slide. It’s inside each item that you place your images. You can also add captions to your slides. The nice thing is that you can put pretty much any HTML element inside a container with the class of carousel-caption and Bootstrap will take care of the styling and formatting. It’s these captions that we’re going to animate.
  • Finally, the Carousel controls are the navigation arrows that enable users to access the next and previous slides.

Bootstrap Carousel structure

If you’d like to explore the Bootstrap Carousel component in detail, be sure check out Creating JavaScript Sliders Using Bootstrap 3, by Syed Fazle Rahman.

To keep this demo simple, I’m not going to add images to the carousel. The focus is all on the carousel captions as the object of our animations.

Building the HTML Structure

If you’re following along, here’s what you need to include in your project:

To speed up the process, grab a starter template from the Bootstrap website and add the necessary files.

Here’s the code for the Bootstrap Carousel:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

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

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

    <!-- First slide -->
    <div class="item active">
      <div class="carousel-caption">
        <h3 data-animation="animated bounceInLeft">
          This is the caption for slide 1
        </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><!-- /.item -->

    <!-- Second slide -->
    <div class="item">
      <div class="carousel-caption">
        <h3 class="icon-container" data-animation="animated bounceInDown">
          <span class="glyphicon glyphicon-heart"></span>
        </h3>
        <h3 data-animation="animated bounceInUp">
          This is the caption for slide 2
        </h3>
        <button class="btn btn-primary btn-lg"
                data-animation="animated zoomInRight">Button</button>
      </div>
    </div><!-- /.item -->

    <!-- Third slide -->
    <div class="item">
      <div class="carousel-caption">
        <h3 class="icon-container" data-animation="animated zoomInLeft">
          <span class="glyphicon glyphicon-glass"></span>
        </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><!-- /.item -->

  </div><!-- /.carousel-inner -->

  <!-- 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><!-- /.carousel -->

If you’ve included the correct files and you open the above code in your browser, you should be able to see a nice working carousel, and all this without writing a single line of JavaScript. If you didn’t add any images to the carousel, just assign a min-height value to the .carousel .item selector in your CSS document to prevent the carousel from collapsing.

The elements inside the carousel caption that we’ll be animating have a data-animation attribute added to them with the specific animation class name as their respective value.

If you’d like to experiment with other animations from the Animate.css library, feel free to replace the values in the data-animation attribute with your chosen animation class names.

We’ll be using the data-animation attribute in our JavaScript code shortly.

Although a simple auto-playing carousel is what you could be looking for in some cases, for this demo we’re after more control.

As a first step in this direction, delete the data-ride="carousel" attribute from the .carousel element. The data-ride attribute initializes the carousel without having to write any JavaScript code. However, we’re going to take control of the carousel using JavaScript, therefore the data-ride attribute won’t be necessary.

Now, give free rein to your creativity and style the carousel captions according to your taste. The style rules that I’m going to focus on here are those relevant to the smooth working of this demo.

More specifically, we’re taking control of the animation-delay property, which will define when each animation will start (note that vendor prefixes are omitted for brevity).

.carousel-caption h3:first-child {
  animation-delay: 1s;
}

.carousel-caption h3:nth-child(2) {
  animation-delay: 2s;
}

.carousel-caption button {
  animation-delay: 3s;
}

The snippet above ensures that the elements start their animation sequentially. There’s room for play here. For instance, you can choose to start animating the first two headings at the same time, followed by the button animation. It’s up to you, have fun with it!

Writing the jQuery

Let’s start by initializing the carousel. In your custom JavaScript file, add this code snippet:

var $myCarousel = $('#carousel-example-generic');

// Initialize carousel
$myCarousel.carousel();

We’ve set the carousel in motion. Next, we tackle the animation.

To animate the captions in the first slide, the script has to fire as soon as the page finishes loading in the browser. However, to animate subsequent slides as they come into view, our code will have to fire on the slide.bs.carousel event. This means that the same code will be used twice: on page load and on the slide.bs.carousel event.

Because we love the DRY principle, we’re going to wrap our code in a function and attach it to the appropriate events as required.

Here’s the code:

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);
});

There’s quite a lot going on in the chunk of code above, so let’s break it down.

Looking into the doAnimations() Function

The doAnimations() function performs the tasks described below.

It starts by caching a string in a variable containing the name of the animationend event. This event tells us, you might have guessed, when each animation ends. We need this bit of information because each time the animation ends, we remove the Animate.css classes. If we fail to do this, the carousel captions will be animated only once, that is, just the first time the carousel shows a particular slide.

var animEndEv = 'webkitAnimationEnd animationend';

Next, our function loops over each element that we want to animate and extracts the value of the data-animation attribute. As you recall, this value contains the Animate.css classes that we need to add to our element in order to animate it.

elems.each(function () {
  var $this = $(this),
      $animationType = $this.data('animation');    
  // etc...
});

Finally, the doAnimations() function dynamically adds the Animate.css classes to each element that we want to animate. It also attaches an event listener that fires only once, when the animation ends. After the animation ends, the Animate.css classes that we just added are removed. This ensures that the next time the carousel comes back to the same slide, the animations take place again (try removing this bit of code and you’ll see the animations happen only once).

$this.addClass($animationType).one(animEndEv, function () {
  $this.removeClass($animationType);
});

As soon as the page loads in the browser, we animate the content inside the first slide like so:

var $firstAnimatingElems = $myCarousel.find('.item:first')
                           .find("[data-animation ^= 'animated']");  
doAnimations($firstAnimatingElems);

Int this code, we begin by finding the first slide. From there, we select the content we want to animate inside the caption by using the values of the data-animation attribute starting with animated. We then use the piece of data thus obtained as an argument in our doAnimations() function and let the function do its job.

After the content in the first slide has performed its animations, we pause the carousel.

$myCarousel.carousel('pause');

This is a feature of the Bootstrap Carousel designed to stop it from cycling. You’re free not to pause the carousel, but you run the risk of annoying your website visitors.

In this case, I recommend you make sure the carousel doesn’t cycle to the next slide until all animations on the active slide have run their course. You can control this by setting the “interval” option in the initialization code as follows:

$myCarousel.carousel({
  interval: 4000
});

I my opinion, an infinitely looping carousel with captions jumping around each time a slide comes into view is far from ideal.

Animating the carousel captions as each slide becomes visible requires the steps described below.

First we attach an event listener to the slide.bs.carousel event. According to the Bootstrap Carousel documentation:

This event fires immediately when the slide instance method is invoked.

$myCarousel.on('slide.bs.carousel', function (e) { 
  // do stuff...
});

Next we select the active slide, that is, the slide currently in view, and from there we find the elements we wish to animate. The code below uses the .relatedTarget property of the slide.bs.carousel event to get hold of the active slide.

var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");

Finally, we call our doAnimations() function, passing our selection of the elements to be animated as an argument.

doAnimations($animatingElems);

The full demo is shown in the CodePen below.

See the Pen Bootstrap Carousel with Animate.css by SitePoint (@SitePoint) on CodePen.

And if you like, you can download the source files to run the demo and experiment with it locally.

Conclusion

As many of you probably know, Carousels do have issues that developers need to take into consideration.

With the Bootstrap Carousel component adding a slider or carousel to a web page is just a matter of entering the appropriate HTML markup.

In this article, I’ve shown how to add some extra pizzazz to the basic Bootstrap Carousel component with a few lines of jQuery and the Animate.css library. However, any other similar CSS library, or coding the CSS3 animations from scratch, will do just as well.

Can you suggest other ways of adding some customizations to the Bootstrap Carousel? I look forward to your feedback in the comments.

Comments
MDP

Thank you so much for this solution! It was just what I was after.

Want to ask though, as I'm not a Jquery expert, how do you write fallbacks for the animation to work in IE9?

Thanks again

antonella

Hi MDP,
Thanks for your comments!

As for IE9 support, if you're talking about the carousel captions animations included in the demo, they can be considered an enhancement, and by the principle of graceful degradation, could be safely ignored by older browsers without much loss. The real problem is with the Bootstrap carousel itself. On the Twitter Bootstrap website is clearly stated:

Bootstrap exclusively uses CSS3 for its animations, but Internet
Explorer 8 & 9 don't support the necessary CSS properties. Thus,
there are no slide transition animations when using these browsers.
We have intentionally decided not to include jQuery-based fallbacks for the transitions.

This means that you need to extend this plugin yourself if supporting IE9 is important to you. If jQuery is not your forte, browsing the Internet might be an option. For instance, I found this fallback:
https://gist.github.com/barryvdh/6155151
I haven't tried it myself, but you can test it and see if it works in your project.

MDP

Hey there, thanks very much for the reply. Yeah I came across that yesterday after doing a search but I'm not sure how to implement it. I tried to just include it as the last item to load on my page but it did not work, it just made the arrows un-clickable. I left a message to the author so hopefully someone can help out.

Thanks again

antonella

My guess is that it's to be used in place of the original Bootstrap carousel plugin. If you exclude the Carousel plugin that comes bundled up with Bootstrap and use this instead, you should be good to go.

MDP

Thanks very much, will give it a go! Thanks again for the awesome slider!

*Edit: Works now! I had to recompile the bootstrap and leave the carousel out of the build (http://getbootstrap.com/customize/). Then it was as simple as linking the fix in the HTML.

andrepd

Antonella, first of all I'd like to thanks you for this post, It's motivated me to study Jquery and CSS3. I've copied the files to my own website files and there seems they are not being initialised, the itens in caption are remained static. I'd appreacite any tips for beginners! Thank you smile

antonella

Hi Andrepd,

If my post has motivated you to study jQuery and CSS3, you've made my day!
I'd like very much to help you, but I need a link to your website to do so. I can't see what's going on from here.
Cheers!

abhilashsandi

Hi.Very good article.
But animation not working in Firefox from second time onwards.

antonella

Hi abhilashsandi,
Thank you. Could you be more specific on what doesn't work in FF? What do you mean by second time?
Cheers!

magtechpro

Hi Antonella,

Your tutorial is great thank you very much for sharing such an important customization on bootstrap carousel. I have one problem I want to control carousel-caption according to slide movement.when next slide comes up carousel-caption comes in fadeIn from bottom so when I click previous dots navigation like bottom to top the active slide caption should fadeout towards bottom and new caption will come along with slide from top to bottom.

there is an example what I am looking for.
http://nicolas-bussiere.fr/

many thanks in advance

mvieiras

Great work, Antonella!

You could just add the (-webkit-animation-delay) in your explanation to help some people with trouble in Chrome, Opera and Safari.

antonella

Thank you so much!

antonella

Hi magtechpro, thank you so much for your comment!

As I understand your requirements, you need to attach two types of animation to the captions, one on the next slide as it become visible and one on the previous slide as it gets hidden.

The Animate.css library should have the right animation types for you to choose from.

You'll need to add some mods to the doAnimations() function. At the top of my head, you don't need to grab the animation types from the data attributes in your HTML because you already have two specific animation types that you want to implement on the way in and on the way out. So, add two variables to store the different animation types.

Next, you'll need to target both the current panel and the previous panel with respect to the current one so that you can attach one type of animation to the captions located in the current panel and another type of animation to the captions located in the previous panel. If you're OK targeting elements with jQuery you could have a go at experimenting with the code yourself. I haven't tried it myself, but I might as soon as I get some free time.

Cheers smile

magtechpro

Hi Antonella,

Thank you very much of your kind reply I will try to implement what you have been suggested me. Another question the example site (http://nicolas-bussiere.fr/) how can i make the same animation effects between pages going back and forth if you click first link of the slide it takes you another page with very smooth slide animation on next page if you click the downarrow link page will go up and new page will popup from bottom very impressive animation.

Please if you could give me any idea how to accomplish this kinda animation with jquery either css3.

I will appreciate your help.

Many thanks in advance

antonella

Hi Magtechpro,
Try using some web developer tools to find out how the web page works. Start from the HTML and CSS before looking into the JS dynamic effects, then have a go at replicating the functionality on your own. Push yourself to get as close as possible to what you want to achieve.

An alternative, shorter route could be to look for a plugin that does something like you see on that website, but I don't have any specific one to recommend. Perhaps you could try to adapt a full page content slider to something that approximates what you're after.

Good luck!

arnique

Awesome tutorial! Well written, clear and straight forward.

Anyway, you may also want to add data attributes for the animation delay and duration. This way you you can easily control these values in the markup without re writing your css code.

Actually, I've had to do this before when customizing bxSlider for one of my projects. The techniques I used are practically the same as yours so adding this functionality to your carousel was pretty easy. You can check out the revised version on codepen.

You can also check out my version of bxSlider here

antonella

Fantastic contribution, thank you for sharing!

juwelkhan

Great article antonella ! However, i've got some problem. The code worked just fine but i didn't get animation for the first slide since the it takes time to load the page. The rest of the things are fine. I tried the jquery document.ready( ) or window.load( ). But none of them worked for me. I know if i increase the delay for the first item then, it will be possible to get the animation to be seen. But, is there any other way or I'm missing something ?

antonella

Hi juwelkhan,
Unless you have a specific concern about it, increasing the delay seems a good idea, of course I take for granted that you're doing your best to get your page to load reasonably fast. Also, have a look at this post, you might find something that works for you:

https://css-tricks.com/transitions-only-after-page-load/

Admittedly, it's a bit old but the suggestions can still be valid.

juwelkhan

Thank you antonella for your quick answer. I appreciate your help. I'll surely have a look at css-tricks article !

antonella

I've faked the slower loading speed by adding a timer, and came up with something like this, perhaps it works for you:

$(window).load(function() {
    setTimeout(function(){
     loaded = true;
     if(loaded) {
        $caption.fadeIn();
        
        //Initialize carousel 
        $myCarousel.carousel();
        
        //Animate captions in first slide on page load 
       doAnimations($firstAnimatingElems);
    
       //Pause carousel  
       $myCarousel.carousel('pause');
     }
   },3000);
});

The loaded variable would be declared before the .load() method and set to false. The $caption variable, where the first caption in the slider is stored, is also declared at the top before the .load() method as

$caption = $myCarousel.find('.carousel-caption:first');

and hidden using jQuery .hide(). Once the page finishes loading, the loaded flag is set to true, and only then the caption is made visible and the animation code is triggered. I haven't tried this on a live server, but you could see if it works for you.

If it doesn't, you could post a link to your site, so it'll be easier for everybody on this forum to contribute an answer.

Cheers!

juwelkhan

hi antonella, i'm highly impressed on your approach to help. smile

Your previous code was fine to work with $(window).load( ) . Its me, who mixed the code with some other things. I was trying to randomize the slide. so, i tried some thing like this.

var slideNum = $('#my-carousel .item').length;
var randSlide = Math.floor( Math.random()*slideNum);
$('#my-carousel .item').eq(randSlide).addClass('active');

this code conflicted with your code which was initialized with the '.item:first'. Randomly when the randSlide value was first, i got the animation for the first slide. So, when i stopped randomization, everything worked fine.

Later i tried to customized your code something like this. but it didn't worked.

var $myCarousel = $('#my-carousel'),
$firstAnimatingElems = $myCarousel.eq(randSlide).find("[data-animation ^= 'animated']");

antonella

What can I say, I'm a believer in the community spirit, and the developers' community is awesome!

magtechpro

Hi ,

Thanks very much of your help I tried my best and accomplished very nice effects there is one more problem with carousel I am using mousewheel plugin to control carousel next and prev it works fine.

I want to stop mousewheel event when I am on last slide I can do with unmousewheel() function but problem is now totally mousewheel stop I can't go next or prev I want to stop only down direction and want to keep the up direction and same thing on first slide stop the up direction and keep down direction with carousel.

There is demo what I want I hope it makes more sense.
http://www.jqueryscript.net/demo/Responsive-jQuery-Layout-Carousel-Slider-Plugin-RadiantScroller/

My demo is here.

https://www.professionalsurgical.com/demo/index5.html#

I will really appreciate of your help I am totally stuck here.

Many Thanks

abukwaik

Great article and well written tutorial indeed, Thank you very much @antonella It works great but actually i used @arnique technique (Thanks to him) which fixed the animation delay issue. I'd recommend to add these attributes in your code.

I'll apply your code (with credit) into my new WordPress theme once finished smile

Here's my dev server http://full.radixtheme.com/

Again, Thank you!

RupeshGonte

Hi Antonella,

Great tutorial. I have downloaded the source file and I am implementing the slider in my website.
I just wanted to how can I set a background image to each slider? And also the slides don't change automatically. Can this be changed once the page is loaded?

Thanks again. smile

antonella

Hi Rupesh,
Thanks for your comment!

The demo uses a background color for each slide, you can easily change that into a background image by adding the appropriate CSS rules to the .item class.

The carousel slides don't slide automatically by design. I thought of leaving control to the user. If you don't want this, remove the following JS line of code:

$myCarousel.carousel('pause');
RupeshGonte

Hi Antonella,

Thank you very much for your quick response. smile Your code works like a charm. thumbsup ok_hand

Love_Life

Hi Antonella,
Thanks for your great post. It is very helpful. I have hard time to turn this carousel to be image responsive in a smart-phone setting with smaller width when each item is indeed a picture. I did use image responsive class, however as the browser width getting smaller, the bottom part becomes the just caption without the image.
For example, I included image and change the font-size here while everything else remains intact. Please advise. Thanks.

antonella

Hi Love_Life,
Thanks for your kind comment. If you post a link to the page where the problem is perhaps I could be of more help.

Cheers!

Bernard_Brillo

Good day Antonella, may I ask what to edit to make the changing of the slider a bit slower. I already remove the $myCarousel.carousel('pause');

Thanks in advance.

antonella

Hi Bernard, good day to you too. Try with this bit of CSS:

.carousel-inner > .item {
    transition-duration: 1s;
}

Replace 1s with your chosen duration.
Best!

Bernard_Brillo

Good day again Antenella. I have a question again. I've been using the animations for the entrance of the elements of my slider. My question is, is there a way i can animate the changing of slider into fadeOut?
So what I'm trying to achieve is once all the elements of the slide has been loaded they will ALL fadeout then the next slide will show.

Hopefully you can help me again with this one. Thanks smile
*** Here's the link of the website I'm working if you want to check http://beduyadental.mtdwebsolutions.com/

antonella

Hi Bernard,
I like what you've done on the website slider. One way you can hide all slider elements could be by changing the doAnimations() function like this:

function doAnimations( elems ) {
        //Cache the animationend event in a variable
        var animEndEv = 'webkitAnimationEnd animationend';
        
        elems.each(function () {
            var $this = $(this),
                $animationType = $this.data('animation');
            $this.fadeIn().addClass($animationType).one(animEndEv, function () {
                $this.removeClass($animationType);
                elems.delay(3500).fadeOut();
            });
        });
    }

I've set the timing inside the elems.delay() jQuery function to 3500, but you can tweak it until it fits with your design.

I hope this helps smile

Bernard_Brillo

Wow Antonella that was really fast..
thanks again for your help 😊
have a great day

antonella

Happy it helped!

Bernard_Brillo

Hello again Antonella, I've tried to apply the code but I think it is not working. The slides are still change and not using the fadeOut effect.

antonella

Hi Bernard,
I've visited your site but the slider seems broken. The slides are stuck. Did you change anything since yesterday?

JasonJohnson47

antonella, thanks for the article. As abhilashsandi mentioned on Apr 1, the animation doesn't replay in Firefox the second time around if you click to view the next/prev slide before the animation had time to finish. I found this great article on how to restart a CSS animation w/o javascript. See this codepen with the adjustments to the CSS and JS. Basically you temporarily assign a nonexistent animation to the element with CSS. In the article, they apply it with :hover. For this slider you apply it when the carousel item slides. Fortunately, Bootstrap temporarily applies classes "left" and "right" to the items when they slide, so you can temporarily apply the nonexistent animation to the elements using .left.active .animated and .right.active .animated.

antonella

Hi Jason,

That's a great workaround!

As you point out, the problem is noticeable in Firefox. It's got to do with the way this browser handles animations: I think it stops them when the window is not currently active, which helps with performance. Since the animation works on the animationend event, my guess is that this event isn't caught if one changes browser window before the animation has completed. It seems to me you also changed the doAnimations() function by getting rid of the reliance on the animationend event to remove the Animate.css classes.

You could achieve a similar result by using setTimeout:

function doAnimations( elems ) {
  elems.each(function () {
     var $this = $(this),
         $animationType = $this.data('animation');
         $this.addClass($animationType);
         var wait = window.setTimeout( function() {
             $this.removeClass($animationType) 
         }, 5000);
   }); 
}

If you use the above, there's no need to change the CSS.

Thank you so much for sharing your solution, it's awesome smile

Pete

Hi Antonella,

I implemented the bootstrap carousel as you described in my one-page website and it's working fine.

I wanted to ask you, if you know if there is a possibility to use the buttons in the captions as a link. That is, I want to use the buttons as they were links of the navbar to get to the other pages of the website.

I tried it with the a href tag:

<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight"><a href="#about">About</a></button>

But this does not work. Is it possible that the a href tag collides with the CSS3 Animations?

Do you have any idea maybe?

Thanks a lot, Pete

antonella

Hi Pete,
Thanks for your comment. I haven't tried this, but I think in principle it should work: the JS script doesn't interact with the href attribute; it only gathers the animation data, adds the data as classes, and then removes those same classes.

I'm not too sure, however, about using the buttons inside the carousel as navigation. Navigation needs to be always accessible and an animated slider with animated buttons might not be ideal. But perhaps it works well for your design.

Could you please post a link to your project so it might be easier to help.

Cheers!

Pete

Hi,

thanks for your reply. Sorry that I cannot provide a link as I'm testing local.

What I want to achieve is the following:

When a user clicks on a menu item, I don't want to carry him directly to the new page. Instead I want to make the respective slide be visible. There, the user gets the principal information about the item and from there he can go to the page digging into deeper information by clicking a button on that slide.

I achieved the first issue (changing the slide by clicking on the menu item) like so:

<li><a href="#carousel-example-generic" data-slide-to="1">About</a></li>

And this works fine.

But when I try to give the button on this slide - which brings the user to the "About" page - an a href, that doesn't work.
It is strange as it is a simple anchor for the button, and as a button actually brings you to another information by using any kind of anchor anyway.

That's why I asked if the code for the "spiced" carousel frustates the button functionality.

I'm using also the scrollspy functionality as the website has a one-page design. So maybe the problem lies there.

I know that my question isn't really about "Spicing Up the Bootstrap Carousel with CSS3 Animations"-topic. But maybe you have an idea.

Thank you for the animations on the bootstrap carousel anyway.

Regards, Pete

leoalv

Hello great job, we thank you for this.

I've been testing, because I wanted to integrate it into Joomla. by:

$document->addScript('assets/animate-caroudel.js);
$documnet->addStylesheet('asstes/animate-carousel.css);

This sends the files to the <head> of the page and not working.

but when I hit the js code in the php file if it works.
tabmbien works if the file named after the HTML code.

there any way to make this work by sending it to <head>

ronpat

(Asking out of school) Are the quote marks correct in the above snippit? They seem unbalanced.

leoalv

The error occurred because enter the code here and do not copy it; and when I wanted to not let me edit.

$document->addScript('assets/animate-caroudel.js');
$documnet->addStylesheet('asstes/animate-carousel.css');

The problem is that to send to the <head> javascript code not working

Ronpat. You'll have a solution?

ronpat

No, I do not write JavaScript so I cannot help. Sorry.

Rintu

Hi antonella,

Im like big fan of yours You help me a lots In bootstrap . Well Im new in bootstrap and not much good in JavaScript but this is very helpful thanx a ton but i notice that in firefox it not work well after around 3min text not animate just carousel only slide but text not animate please help me and sorry for my English Im not good in english thanx and waiting ur solution :smile:

antonella

Hi Rintu,

Thank you so much for your kind words and your feedback: it's great you've been finding the content helpful.

As for the issue you point out, it's got to do with how Firefox handles animations: when the browser window is not active, Firefox stops the animation, which is good for performance, not so good for this demo.

Because the carousel script relies on the animationend event to remove and then add the relevant classes, if you leave the browser window where the carousel is running before the animation has completed, Firefox stops the animation and the script can't catch the animationend event. You'll find an alternative solution by Jason Johnson and one by me in the comments above.

I hope this solves the problem for you :smile:
Cheers!

mrgrnboro

Much gratitude for a great article. Splendid, simply splendid. One issue: after removing the pause statement, I don't see that after adding the interval -- any change from 4000 up or down does not seem to be working in Chrome or Firefox or Safari. Anyone else experiencing this?

antonella

Thank you so much for your comment!

If you're using the timer you shouldn't encounter serious issues. I've tried with 5000, 6000 and up and it's working fine. Perhaps you need to adjust the animation-delay property in the CSS. If I go lower than 4000 I'll have to revise the value of the animation-delay property: as it stands, the entire animation of all three elements in the slider takes 3 seconds, therefore any value lower than this in the timer has a negative effect on the resulting animation.

What's exactly not working on your end? Could you please post a link to your code?

Cheers!

Rintu

Thank you thank u thank u thank u soooo much for your response antonella.

And Thank you so much for help me as you mention before in your comment your java script working fine in Firefox :smile: Thank you so much

antonella

Thank you!!!! So happy the script worked

mrgrnboro

I am using your source files. No changes except commenting out the $myCarousel.carousel('pause'); line and adding the $myCarousel.carousel({interval: 4000 }); line. No other changes, but no difference in 4000 or any greater value.

antonella

Hi Mrgrnboro,
Thanks for getting back to me. What's not working? The carousel is not sliding? The animations are not happening or are not synchronized?

As it stands, 4000 works well with all the other settings that control the working of the Carousel. If you change the seconds in the timer, you most likely have to adjust other values like the animation-delay property in the CSS and/or the interval property of the Carousel in the JS file. If you'd like to slow down the carousel try adjusting these values, perhaps even the transition property of the sliders. It depends on what you're trying to achieve and experiment with different values.

Pete

Hi antonella,

I´m using gsap to animate the captions. Do you have any idea how can I reverse the animations before the next slide comes into view.

I´m trying that out with slide.bs.carousel custom event, but don´t know exactly where to put it in the code.

Any hint would be much appreciated.

Best regards, Pete

Pete

Hi again,

please have a look at this codepen for better understanding: http://codepen.io/anon/pen/pgowvM

Where would I put the reverse animations here?

Regards, Pete

Marshall_Spevak

Hello Antonella,

Another quick question. I looks like you have been so generous with your time. I have (http://www.webmentorshipsc.com) that has owl.carousel.min.js, animate.css, owl.carousel.css and other bootstrap files. I'm pleased with the custom data-animations such as bounceinup animations but for the life of me I cannot get the slider to auto play. I've edited the css, js and source code HTML with interval suggestions and still nothing. I'm at a loss. Can you help. If you're ever in San Diego, I owe you a dinner and some beers! LOL!

antonella

Hi Marshall_Spevak,

Thank you for your comment (and the offer).

Are you using Bootstrap or Owl Carousel? On your website it seems to me you're using the Bootstrap carousel. However, I can't find any JS code to initialize the carousel. To have the carousel play on page load you need to either add data-ride="carousel" to the main carousel container div or initialize the component using JavaScript: $('#home-carousel').carousel();

If it doesn't work, a good way to debug the problem is to isolate the component. Just copy and paste the bare-bone code needed for the carousel on CodePen and see if it works. You can share the URL here if you like so we can all look into it.

Cheers!

Marshall_Spevak

Yes, I am using both. Please see images for files used

antonella

I saw those files using developer tools.

I previewed main.js previously but couldn't find the code to initialize the BS Carousel, although you're using it on the page. Also, what I meant was that I didn't see Owl Carousel on the actual webpage, although I saw the initialization code in main.js.

Did you try initializing the Bootstrap Carousel either using data-ride or the JS code the way I suggested above? If it doesn't work, it'd be so much quicker to understand the problem if you isolate the component. I suggest using something like CodePen and pasting just the code needed for the BS Carousel to work, so if you can't find what's wrong with it, you can quickly share it here on the forum. It's also easier for me to look at the code and test it without having to wade through lots of files.

Cheers!

Marshall_Spevak

OMG - worked perfectly - I added to this container code - div id="home-carousel" class="carousel slide" data-ride="carousel" data-interval="3000" I owe you dinner and beer. Thanks - Kinda of a cloudy day but you get the gist - https://portal.hdontap.com/s/embed/?stream=catamaran-ptz_eh-CUST

antonella

That's a fantastic place!

I'm really glad the slider works (dinner sounds great: London - San Diego is a breeze) :smile:

Marshall_Spevak

Hey Antonella - Sure London to SD is easy. How about I fly there and we go to Khan's in Bayswater. Went there many times last in London. Actually I have one more mystery I cannot solve. If you look at the site, webmentorshipsc.com when in phone responsive mode the menu expands but after click does not auto collaspe like another site I designed - leucadia-energy.com. Where do begin to attack this? Thanks.

Marshall_Spevak

Actually I figured it out! :slight_smile: added this to each link.
nav class="collapse navigation navbar-collapse navbar-right" role="navigation"

antonella

That's great! I think for topics unrelated to the article it's a good idea to open a new thread. Cheers :slight_smile:

gbsimon

Hey Antonella,

Great stuff on this article! It had exactly what I was looking for.

I am writing to join the many that have a question for an experienced coder such as yourself.
I am currently doing FreeCodeCamp's programming course, and there is a Tribute page challenge I must complete. Here is what I've created so far (please go easy on me I've only been coding for just over a month :slight_smile: )

As you can see in the CSS section, at the top, I've chosen 4 colors for my palette.
After altering some colors, when I decrease the browser window, the menu bar collapses but it is not viewable.
I've tried to look around for an answer but no luck.
Secondly, on my jumbotron containing the blockquote and the picture, I want the second part of the jumbotron (the picture) to go on top when the window size is decreased.
Any way around this?
I'm not in San Diego I actually just moved to London so I can definitely buy you a beer or two! lol
Cheers and thanks in advance.

antonella

Hi GBSimon,

Thanks for your comment, I'm glad you found the article useful. I've looked into your demo. To have the columns in the Jumbotron swap, you need to use BS .col-md-push-* and .col-md-pull-* classes. As for the navigation, you need to add a background-color to .navbar-toggle .icon-bar. Here's a revised Pen: codepen.io/antonietta/pen/WxwQNb.

However, as I pointed out in the previous message, if you have queries that are unrelated to the article, please open a new thread. Cheers!

dngretsch

Hi Antonella,

I'm using this, and it works great for the first 3 cycles, then they stop resetting the animation and just are static. Any help?

antonella

Hi Dngretsch,

Could you please post a demo on something like CodePen. This will make it easier to debug. Cheers!

dngretsch

I can send you a link to the dev environment, but don't want it public. Can you private email me? Thanks!

antonella

That would mean digging into your entire project to find out what's causing the problem.

Rather, I'd like to see the carousel in isolation so that it becomes easier to single out the bug relating to this specific component. You can do so by replicating just the carousel-related code to something like CodePen and see if you're getting the same bug. If you are, I can look at it and hopefully make a helpful suggestion. If you're not, then something else on your project is interfering with the carousel and you can start switching other scripts off to find out what's causing the issue.

kumar_gajurel

Thanks a lot antonella for nice sharing. Hats off

cobain69

Hi Antonella!

I am having trouble trying to change de background color for an image.

I try on each class on the css, but id does not work. Can you help me with this please?

Thanks!

Hernan

antonella

Hi Hernan,

I'm not sure I understand the problem: do you mean changing the background color of a slide inside the carousel? Could you please post a link to the page where the problem is? Cheers!

cobain69

Hi antonella, thanks for the fast answer!

What i ment is that i want to add a backgound image to a slide intead of the backroung color, but i can ´t figure it out. For example, i tried i tryed changing this line on the css file

.skyblue {
background-image: "img/image.png";
}

but it does not work.

I am going in the right direction?

Thanks again!

Hernan

cobain69

Hi Anotonella,
It´s me again.
I could´t get it working.

Here is a code pen so you han help me see what i did wrong.


For the example i used the same code you did.

Do i need to use specific image sizes?

Thanks in advance!

Mittineague

It might help if you used the correct syntax. i.e. not

background-image: "https://a.wattpad.com/useravatar/Edu-pikachu.128.689397.jpg";

but

background-image: url("https://a.wattpad.com/useravatar/Edu-pikachu.128.689397.jpg");

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

cobain69

Yeap. Thanks for that.

But even with the correct sintax it still does not work :frowning:

antonella

I've forked your pen and it seems to be working:

cobain69

Thanks both of you for all the help!

I will keep on with that :slight_smile:

And again, Thanks!!

antonella

That's all right. Sorry I didn't notice the missing url() keyword before, and thanks Mittineague for pointing that out. Now just position the background image so that it's visible. I've updated the demo to show this, although you could also use the short background property syntax. Good luck with your project!

Md_Razu_Ahmed

Hi antonella
Can you help me that how can I do carousel auto?

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.