<:import src="base.htm" />
<:define tag="bs-carousel:div"
class="carousel slide"
// parameters
::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}
>