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!
You just need a little bit of CSS
.carousel .carousel-control { visibility: hidden; }
.carousel:hover .carousel-control { visibility: visible; }
Its also nice to get rid of those pesky gradients, which adding this also does:
.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel .carousel-control {
visibility: hidden;
}
.carousel:hover .carousel-control {
visibility: visible;
}
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.