.o-slider
.slick-slider.o-slider__slider(
ref="slider"
data-module="slickjs",
:data-module-options="JSON.stringify(slickOptions)"
)
//@slot Each of elements put here will be a slide
slot
.slick-slide.relative.o-slider__slide(
v-for="item in items"
:data-caption="item.caption"
:key="`slide${item.id}`"
:ref="`slide${item.id}`"
v-html="item.html"
)
//@slot Slot for the whole bottom section
slot(name="bottom-section")
.flex.justify-between.mt-6
//@slot Slot for the caption element
slot(name="caption")
.small.italic.o-slider__caption
//@slot Slot for the whole counter element
slot(name="counter")
.small.font-700.o-slider__counter
//@slot Slot for counter index element
slot(name="counter-index")
span.o-slider__counter-index 1
//@slot Slot for counter separator
slot(name="counter-separator")
| /
//@slot Slot for counter total element
slot(name="counter-total")
span.o-slider__counter-total 1
```jsx
const items = [
{
id: 0,
html: 'Slide 1 html
',
caption: 'This is the caption for slide 1'
},
{
id: 1,
html: '
',
caption: 'This is the caption for slide 2'
},
]
```