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?
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:
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.
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
*** Here’s the link of the website I’m working if you want to check http://beduyadental.mtdwebsolutions.com/
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.
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.
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
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.
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.
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:
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.