I was wondering if someone faced the same issue that I've found vue-flickity.
If you watch the videos below, you will see the second caption slide don’t show up at the first time the carousel start. I inspected the code while the carousel was running and found that at the first cycle the class is-selected is-nav-selected are not add in the DOM on the second captions.
If i don’t use a custom dot ui, I don’t face this bug.
<template>
<section id="header-carousel" class="row no-gutters comp-lineup-carousel">
<div class="col">
<div style="position:relative;">
<div class="flickity-nav">
<div class="container extra-padding h-100">
<div class="row align-items-center h-100">
<div class="col">
<button @click="flickityCarousel.pausePlayer();flickityCarousel.previous();" type="button" class="flickity-previous">Précédent</button>
<button @click="flickityCarousel.pausePlayer();flickityCarousel.next();" type="button" class="flickity-next">Suivant</button>
</div>
</div>
</div>
</div>
<flickity class="flickity-wrapper is-hidden"
:class="'flickity-carousel-' + uid"
:ref="'flickityCarousel_' + uid"
:options="flktyCarousel">
<tile v-for="dataLineUp in dataLineUps"
:key="dataLineUp.id"
:link="dataLineUp.link"
:srcImage="dataLineUp.srcImage"
:altImage="dataLineUp.altImage">
</tile>
</flickity>
<div class="flickity-lines d-flex justify-content-center">
<div class="container extra-padding">
<div class="row no-gutters">
<div class="col" role="toolbar">
<ul class="flickity-dots d-flex justify-content-center">
<li v-for="(dataLineUp, index) in dataLineUps"
:class="{ 'flickity-active': selectedCarouselSlide === index }">
<button @click="flickityCarousel.pausePlayer();flickityCarousel.select(index);" type="button">{{index+1}}</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flickity-captions container extra-padding py-4"
@mouseenter="mouseEnterCaptions"
@mouseleave="mouseLeaveCaptions">
<flickity class="flickity-wrapper"
:ref="'flickityCarouselNav_' + uid"
:options="flktyCaptions">
<div class="carousel-cell">
<div class="row align-items-center w-100 no-gutters">
<div class="col-12 col-md-9">
<div class="caption-header pb-1">Vézina, chef responsable - saison 2 Vézina, chef responsable - saison 2</div>
<div class="caption-subheader">Jeudi 18 h<span class="pipe-divider">Manger selon les saisons</span></div>
</div>
<div class="col-12 col-md-3 d-flex justify-content-center justify-content-md-end">
<div class="btn btn-outline-primary mt-3 mt-md-0 text-uppercase" href="#" role="button">Voir l'épisode</div>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="row align-items-center w-100 no-gutters">
<div class="col-12 col-md-9">
<div class="caption-header pb-1">Mon food truck à la clé</div>
<div class="caption-subheader">Lundi 15 mai 19 h<span class="pipe-divider">Rhône-alpes-jour 1</span></div>
</div>
<div class="col-12 col-md-3 d-flex justify-content-center justify-content-md-end">
<div class="btn btn-outline-primary mt-3 mt-md-0 text-uppercase" href="#" role="button">Voir l'épisode</div>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="row align-items-center w-100 no-gutters">
<div class="col-12 col-md-9">
<div class="caption-header pb-1">Le nouveau magazine est arrivé en kiosque!</div>
<div class="caption-subheader">Le BBQ est au menu<span class="pipe-divider">Déjeuner sur le BBQ</span></div>
</div>
<div class="col-12 col-md-3 d-flex justify-content-center justify-content-md-end">
<a class="btn btn-outline-primary mt-3 mt-md-0 text-uppercase" href="#" role="button">Abonnez-vous</a>
</div>
</div>
</div>
</flickity>
</div>
</div>
</section>
</template>
<script>
import Flickity from '../Flickity.vue'
import Tile from './Tile.vue'
//console.log('!!!!!!!!!!!!!', Tile)
export default {
name: 'lineup-carousel',
components: {
Flickity,
Tile
},
data () {
return {
uid: this._uid,
dataLineUps: [
{
link: 'http://fromagedici.com',
srcImage: '/public/images/static/slide1-desktop.jpg',
altImage: ''
},
{
link: 'http://fromagedici.com',
srcImage: '/public/images/static/slide2-desktop.jpg',
altImage: 'fake to remove please 2 '
},
{
link: 'http://fromagedici.com',
srcImage: '/public/images/static/slide3-desktop.jpg',
altImage: 'fake to remove please 3'
}
],
selectedCarouselSlide: 0,
flktyCaptions: {
asNavFor: '.flickity-carousel-'+ this._uid,
prevNextButtons: false,
pageDots: false,
cellAlign: 'left',
draggable: false,
imagesLoaded: true
},
flktyCarousel: {
autoPlay: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
imagesLoaded: true,
arrowShape: {
x0: 10,
x1: 60, y1: 50,
x2: 65, y2: 50,
x3: 15
}
}
};
},
computed: {
flickityCarousel() {
return this.$refs['flickityCarousel_' + this.uid];
}
},
methods: {
mouseEnterCaptions: function() {
this.$refs['flickityCarousel_'+ this.uid].pausePlayer()
},
mouseLeaveCaptions: function() {
this.$refs['flickityCarousel_'+ this.uid].unpausePlayer()
},
},
beforeMount () {
},
mounted () {
const allFlickity = document.querySelectorAll('.flickity-wrapper')
for (let i = 0; i < allFlickity.length; ++i) {
allFlickity[i].classList.remove('is-hidden')
}
this.$nextTick(() => {
this.flickityCarousel.on('select', () => {
this.selectedCarouselSlide = this.$refs['flickityCarousel_'+ this.uid].selectedIndex();
});
});
},
updated () {
// console.log('*********************************')
},
beforeMount () {
// Use this method for client-side fetching
}
};
</script>
<style scoped lang="scss">
</style>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent