Carousel: confusing CSS styles

[SventB]

For the carousel, you should better use the default bootstrap styles, instead of heavily enhance them.

Now, the CSS styles are a little bit "unclean", e.g. for carousel controls: CSS class "carousel-control-prev-icon" has a background image...

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")

...but this image isn't displayed, you use your own implementation with a CSS arrow.

[Hasch109]

I had the same problem. Situation: bootstrap-package 11 + template from sitepackages.com. After installing and including everything worked fine except the control icons of the carousel. They are there but not visible. I found out that the problem seems to be the setup.typoscript of my extension:

######################

DEPENDENCIES

###################### <INCLUDE_TYPOSCRIPT: source="FILE:EXT:bootstrap_package/Configuration/TypoScript/setup.typoscript"> ##############

PAGE

############## page {

Meta

meta {
    X-UA-Compatible = IE=edge,chrome=1
    X-UA-Compatible.httpEquivalent = 1

    viewport = width=device-width, initial-scale=1
}

includeCSS {

theme = EXT:XX/Resources/Public/Scss/Theme/theme.scss

}

---

If you comment these lines out, the icons are visible.

[gilbertsoft]

@SventB @Hasch109 Is this issue still present in the lastest 11.x and 12.x releases? I guess this was solved with #866

[SventB]

@gilbertsoft Yes, the background image is still present, but that should be all.

[benjaminkott]

with https://github.com/benjaminkott/bootstrap_package/commit/b224a40e72c07fd9a32033c1c9ffe8fb10c793c5 we are moving closer to bootstrap default again, i think we can mark this as resolved.