gs-shop / vue-slick-carousel

🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
https://gs-shop.github.io/vue-slick-carousel/
Other
801 stars 186 forks source link

How do you reset or update the slider? #168

Open joannesalfa opened 3 years ago

joannesalfa commented 3 years ago

Why is there an event "reInit"? there is no reset or update method!

danieljindev commented 3 years ago

You can force Vue to rerender the carousel when the content of the slider change. To do it you will need to watch the change of the content.

...
<VueSlickCarousel
      v-bind="settings"
      :key="carouselKey"
    >
         <custom-component
               v-for="(item, index) in services"
         />
</VueSlickCarousel>
...
  watch: {
    services() {
      this.forceRerender()
    },
  },
  methods: {
    forceRerender() {
      this.carouselKey += 1
    },
  },
...
MemoRodMx commented 2 years ago

Hi, i got this message after change the key and try to change slide

Error in v-on handler: "TypeError: Cannot read property 'goTo' of undefined"

refers to line: this.$refs.innerSlider.goTo(slide, dontAnimate);

Note: this cause error only when you have 2 carousel asNavFor and update the :key value

minoo221 commented 2 years ago

@MemoRodMx Hi, how did you solve the problem with Error in v-on handler: "TypeError: Cannot read property 'goTo' of undefined" I have two carousel with asNavFor and after change data carousel return this error. Thanks.

rizkiramadhanx commented 3 weeks ago

you can replace goto method with initialSlide aand initialSlide is dynamic state