<:import src="base.htm" />
<:define tag="bs-carousel:div"
class="carousel slide ${extra ?? ''}"
// parameters
:extra=${null} // extra classes for this instance
:slides=${[]}
:controls=${true}
:indicators=${true}
:captions=${true}
:fade=${false}
:ride=${true}
:interval=${5000}
:dark=${false}
// private
:_id=${`bs-carousel-${$id}`}
:_selector=${`#bs-carousel-${$id}`}
/*
the position is needed three times per slide and `:for-each`
binds the item, not its index, so it is carried on the item
*/
:_slides=${slides.map((slide, i) => ({ ...slide, index: i }))}
id=${_id}
:class-carousel-fade=${fade}
data-bs-ride=${ride ? 'carousel' : null}
data-bs-interval=${interval}
data-bs-theme=${dark ? 'dark' : null}
>