Vue3 Carousel 🎠

I couldn't make carousel to work shocked

<template>
<div id="kt_sliders_widget_1_slider" class="card card-flush carousel carousel-custom carousel-stretch slide h-250px"
data-bs-ride="carousel" data-bs-interval="1000">
<div class="card-header d-flex align-items-center justify-content-between flex-wrap"
>
<span class="text-gray-400 fs-4 fw-bolder pe-2" />
<ol class="p-0 m-0 carousel-indicators carousel-indicators-bullet carousel-indicators-active-primary">
<li data-bs-target="#kt_sliders_widget_1_slider" :data-bs-slide-to="index - 1" class="ms-1 "
:class="{ active: index - 1 == 0 }" aria-current="true" v-test-id="'item-dots'" v-for="index in messages.length"
:key="index - 1" />
</ol>
</div>
<div class="card-body carousel-inner pt-2">
<div class="carousel-item " :class="{ 'active show': index == 0 }" v-test-id="'items'"
v-for="(message, index) in messages" :key="index">
<div class="m-0">
<span class="fs-4 text-dark fw-bolder text-hover-primary text-dark lh-base cursor-pointer">
{{ message.title }}
</span>
<div class="fw-bold fs-5 text-gray-600 text-dark mt-2 mb-5"
v-html="removeHtml(message.content).slice(0, 150).trim() + '...'" />
<span class="text-muted me-2 fs-7"
v-html="$t('phrases.message-send-at-by', { sendAt: message.sentAt, sentBy: message.author })" />
</div>
</div>
<div class="d-flex align-items-center justify-content-center min-h-95px" v-if="messages.length === 0"
v-test-id="'no-data'">
{{ $t('common.no-data') }}
</div>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Message } from '@support/core/types'

export default defineComponent({
props: {
messages: {
type: Array as PropType<Array<Message>>,
required: true
},
device: {
type: String,
required: true,
default: 'web:desktop'
},
storyMode: {
type: Boolean as PropType<boolean>,
required: false,
default: false
}
},
setup (props, { emit }) {
....
}

})
</script>

<style>
.carousel.carousel-custom .carousel-indicators {
align-items: center;
position: static;
z-index: auto;
margin: 0;
padding: 0;
list-style: none;
}

.carousel.carousel-custom .carousel-indicators.carousel-indicators-bullet li.active {
transition: all 0.3s ease;
background-color: #33589E;
height: 6px;
width: 16px;
}

.carousel.carousel-custom .carousel-indicators.carousel-indicators-bullet li {
transition: all 0.3s ease;
background-color: #D9D9D9;
border-radius: 6px;
height: 6px;
width: 6px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.carousel.carousel-custom .carousel-indicators li {
transform: none;
opacity: 1;
}

.carousel-indicators [data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 3px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #ffffff;
background-clip: padding-box;
border: 0 !important;
border-top-color: currentcolor;
border-top-style: none;
border-top-width: 0px;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.5;
transition: opacity 0.6s ease;
}
</style>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

Thank you for contacting our support.

From the first look your carousel code looks fine, could you please verify that your indexes in attribute data-bs-slide-to are generated correctly?

You can find Bootstrap 5 carousel usage examples in our doc.
https://preview.keenthemes.com/metronic8/vue/docs/#/carousel

Also, for more usage examples, check out Bootstrap 5 official doc.
https://getbootstrap.com/docs/5.0/components/carousel/

Regards,

v-for="index in messages.length"
here index starts from 1 so i have to subtract one

<ol class="p-0 m-0 carousel-indicators carousel-indicators-bullet carousel-indicators-active-primary">
<li data-bs-target="#kt_sliders_widget_1_slider" data-bs-slide-to="0" class="ms-1 active" aria-current="true" data-test></li>
<li data-bs-target="#kt_sliders_widget_1_slider" data-bs-slide-to="1" class="ms-1" aria-current="true" data-test></li>
<li data-bs-target="#kt_sliders_widget_1_slider" data-bs-slide-to="2" class="ms-1" aria-current="true" data-test></li>
<li data-bs-target="#kt_sliders_widget_1_slider" data-bs-slide-to="3" class="ms-1" aria-current="true" data-test></li>
<li data-bs-target="#kt_sliders_widget_1_slider" data-bs-slide-to="4" class="ms-1" aria-current="true" data-test></li>
</ol>

Hi,

Does carousel work now?

Also, please check your console for errors.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(