Carousel Arrows and Indicators

Ask the community for help and support.
Post Reply
heatherbell
VIP Member
VIP Member
Posts: 1996
Joined: Mon Oct 07, 2019 4:39 am
Has thanked: 26 times
Been thanked: 175 times

Carousel Arrows and Indicators

Post by heatherbell »

The default Bootstrap Carousel arrows and indicators are white which can cause an issue on some images.
Making changes on a new site so just posting our fix.
This adds a black 'shadow' so they show up on any image.
Add to your template/static/user.css and save:

Code: Select all

/* carousel arrows & indicators */
.carousel-control-next,
.carousel-control-prev{
filter: drop-shadow(6px 0px black);
}
.carousel-indicators{
filter: drop-shadow(0px 4px black);
}
Lots of ways the filter can be used to suit yourself:
https://www.w3schools.com/cssref/css3_pr_filter.asp

Tags:
Post Reply