Carousel with v-for and data question #77
Labels
Comments
|
I have solved my error by using this approach instead. <b-carousel id="infoscreen-carousel" :interval="3000" :indicators="false" :controls="false">
<b-slide v-for="n in 10">
<template v-if="events[n]">
<div class="carousel-image">
<img v-if="events[n].image" v-bind:src="events[n].image.raw" v-bind:alt="events[n].title" v-bind:title="events[n].title">
</div>
<div class="carousel-desc">
<h2><a v-bind:href="events[n].url">{{ events[n].title | truncate(88) }}</a></h2>
<p>
<span>{{ events[n].all_oist_category }}</span>
<span v-if="events[n].location">{{ events[n].location }}</span>
<span>{{ events[n].start_date | unixToString }}</span>
</p>
<p>{{ events[n].summary | cleanString | truncate(176) }}</p>
</div>
</template>
</b-slide>
</b-carousel>Any comments would still be appreciate as to the correct approach. Thank you |
|
Closing this as is a little old. Official carousel component support will be in next releases :) |
|
I tried to do the same by taking the carousal from the documentation and put the image links in the data section. <template>
<b-row>
<b-col>
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<b-carousel-slide v-for="image in images" v-bind:img-src="image"></b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Sliding: {{ sliding }}
</p>
<div v-for="image in images">{{image}}</div>
</b-col>
</b-row>
</template>
<script>
export default {
data () {
return {
images:
[ 'https://lorempixel.com/1024/480/technics/2/'
, 'https://lorempixel.com/1024/480/technics/8/'
, 'https://lorempixel.com/1024/480/technics/5/'
]
}
}
}
</script>
<style scoped>
</style>The Is there something in the carousel component that i need explicit keys now? (the carousel works though) How is this different than a regular div? edit: changing to smaller sizes seems to have no effect |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am using the Carousel which works fine with static items but when I use it with a v-for eg.
I get this error in bootstrap-vue.common.js?25a6:1
In Firefox Dev edition, error shows up as:
Really not sure how to go about this. Any help would be appreciated!
The text was updated successfully, but these errors were encountered: