vue-splide
vue-splide copied to clipboard
Published
20 hours ago •
Splidejs
Splidejs
Loop mode/rewindbydrag not working if get slider data from DB with axios.
Checks
- [X] Not a duplicate.
- [X] Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions
Version
0.6.7
Description
The problem is loop mode/rewindByDrag & rewind is not working after retrieving data from DB with Axios. If I use static JSON data, everything just works fine. But when I'm returning the Axios response JSON data to the array, Loop/Rewind/rewindByDrag is not working. here is the code below,
<template>
<section
id="cb-bg-video"
class="overflow-hidden cb-hero relative">
<div class="">
<Splide
:options="options"
aria-label="Hero Slider"
class="">
<SplideSlide
v-for="slide in sliderContents"
class="flex justify-start items-center">
<div :class="slide.overlay ? 'image' : 'w-full'">
<img
:src="slide.src"
:alt="slide.alt"
class="w-full object-cover h-77vh" />
</div>
<div class="absolute w-full z-20">
<div class="container flex flex-col">
<div class="overflow-hidden">
<h1
class="text-3xl lg:text-[40px] text-white font-bold capitalize leading-snug w-[55%] lg:w-full">
{{ slide.heading }}
</h1>
<p
v-if="slide.showDescription"
class="text-white capitalize text-lg mt-2">
{{ slide.description }}
</p>
</div>
<a
v-if="slide.showButton"
:href="slide.link"
:class="{
button: slide.button,
'button-alt': slide.buttonAlt,
}"
class="mt-4 capitalize font-bold">
{{ slide.buttonText }}
</a>
</div>
</div>
</SplideSlide>
</Splide>
</div>
</section>
</template>
<style lang="scss">
@import '@splidejs/vue-splide/css';
@import '../../assets/scss/variables/_hero.scss';
</style>
<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
export default {
data() {
return {
sliderContents: [],
};
},
components: {
Splide,
SplideSlide,
},
mounted() {
axios
.get(window.location.origin + '/frontpage-api/slider')
.then((response) => {
this.sliderContents = response.data;
console.log(this.sliderContents);
});
},
setup() {
const options = {
rewind: false,
arrows: false,
autoplay: true,
perPage: 1,
type: 'loop',
perMove: 1,
drag: true,
pauseOnHover: true,
autoHeight: true,
};
return { options };
},
};
</script>
from the link below, you can not rewind by dragging the slide or loop.
Reproduction Link
https://codesandbox.io/s/lucid-diffie-mq7k9c?file=/src/App.vue:595-599
Steps to Reproduce
No Idea. Please Look up.
Expected Behaviour
The loop mode/rewind/rewindbydrag should work fine as it works on static JSON data.
