changing-bootstrap-carousel-slide-to-fade-featured

Changing Bootstrap Carousel to Fade Instead of Slide

Image sliders! The number one most requested thing from all clients for websites. Right? Well I had a recent project that needed to elements to slide, images and testimonials. The images they wanted to slide left to right and the testimonials they just wanted to fade in and out.

I am using Lean Theme as a base, which includes Bootstrap, so naturally I’m using the Bootstrap Carousel. The default behavior of each item in the carousel is to slide to the left. The current item slides left and the next item slides left at the same pace. All of these transitions are being handled as CSS animations, located in the carousel.less file.

Once I dug into the carousel.less file, I found the values that places that were changing the left position. The first thing that looked at was the CSS animation itself. It’s doing an ease-in-out animation and has a direction of left. That was the first thing I changed,

Before
.transition(.6s ease-in-out left);

After
.transition(.6s ease-in-out);

The next thing I found was the next and previous classes were toggling the left position from 100% to -100%. I changed all of those to be 0 all the time,

Before
> .next {
left: 100%;
}
> .prev {
left: -100%;
}

After
> .next {
left: 0;
}
> .prev {
left: 0;
}

There’s a couple of values that you have to change in all. Here’s the complete code that you want to change. You either want to add it to another .less file in your project or go into the carousel.less file and change it there.

.carousel-inner {
> .item {
.transition(.1s ease-in-out);
}
> .active,
> .next,
> .prev,
> .next.left,
> .prev.right,
> .active.left,
> .active.right{
left: 0;
}
}

And here’s some screenshots of what a carousel looks like and behaves out of the box,

First Slide

First Slide

Second Slide

Second Slide

And here’s a couple of screenshots from the project I worked on,

Real Testimonial

Real Testimonial

Fake Testimonial

Fake Testimonial

Just like I changed the values to the carousel to removing the sliding animation, you could keep them but just change the position from left to right. The changes would be very similar to the ones I have shown above.

I hope that helps anyone! Let me know if you have any questions.

  1. Hi!

    I have a question. How can i delay the changing of slides after i click a button? I would like that when i click on “About” button, for example, the About slide comes up but after 2 seconds.

    Looking forward for your answer!

    Regards,
    r.

Leave a Reply

*
*

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>