Is there a better carousel alternative?

Solved

Is there a better carousel alternative?

Question

The carousel widget arrow icons cover up our image on mobile. Is there a way to move these icons further away, or is there a better carousel alternative in forge? This is an issue in both reactive and traditional.

21 Mar

Francisco Calderón

Champion

Solution

Hi Matthew,

Not a full solution but just to give a couple options: In Service Studio, you should be able to control whether the Navigation arrows appear or not by modifying the Navigation attribute of the Carousel widget, so it could be set to False to hide the arrows completely (and you could enable the Autoplay property in this case too if you're concerned about users potentially missing that this is a Carousel):

Other than that, you could try tweaking the CSS stylesheet to introduce some changes quickly. For example, the following adds some transparency to the arrows so that they don't fully block what is underneath:

.carousel .carousel-navigation {
    background-color: rgba(255, 255, 255, 20%); /*Background color of the circles (20% transparency)*/
    color: var(--color-neutral-6); /*Text color of the arrow icons inside the circles*/
}

Let me know if that helps.

22 Mar

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines