Make Bootstrap Carousel navigation show only on hover

user_1553293 0
Viewed 23606

I was using Bootstrap's Carousel, found here. It's a great script, unfortunately, I'd like for it to be able for the navigation arrows to go away and only appear on hover. Is this possible and how would I would go about implementing that?

Thanks for all help!

twitter-bootstrap jquery javascript
3 Answers

Here's a follow-up to @Sherbrow's answer that works with Bootstrap 5. It also includes a fade-in and an animation of the arrows.

.carousel .carousel-control-prev,
.carousel .carousel-control-next
{
    visibility: hidden;
    opacity: 1;
}

.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next
{
    visibility: visible;
    animation-duration: 1s;
    transition-timing-function: linear;
}

.carousel:hover .carousel-control-prev
{
    animation-name: FadeInPrev;
}

.carousel:hover .carousel-control-next
{
    animation-name: FadeInNext;
}

@keyframes FadeInPrev
{
    0%
    {
        opacity: 0;
        padding-left: 40px;
    }
    100%
    {
        opacity: 1;
        padding-left: 0px;
    }
}

@keyframes FadeInNext
{
    0%
    {
        opacity: 0;
        padding-right: 40px;
    }
    100%
    {
        opacity: 1;
        padding-right: 0px;
    }
}
user_3846700
Related