Skip to content

Add thumbnails and make the control optionals. Require extra CSS

As demonstrate on the TRM this add thumbnail and make controls optionals, IE: {carousel interval="6000" wrap="true" pause="hover" id="mycarousel" controls="n" indicators="n" thumbnails="y"}

It require extra CSS code but I'm not sure where to put it.

` .carousel-thumbnails { position: absolute; top: 0; left: 0; z-index: 15; display: flex; justify-content: center; width: 40px; padding-left: 0; list-style: none; flex-wrap: wrap; }

.carousel-thumbnails li { box-sizing: content-box; flex: 0 1 auto; margin-bottom: 3px; margin-top: 3px; text-indent: -999px; cursor: pointer; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; opacity: 0.5; transition: opacity 0.6s ease; padding: 3px; }

.carousel-thumbnails .active { opacity: 1; } `

How it look: Screen_Shot_2021-01-27_at_09.55.55_

More to do make the thumbnail "active" class work.

Merge request reports