S
S
Sergey Khindrikson2021-02-26 11:07:07
Slick
Sergey Khindrikson, 2021-02-26 11:07:07

slick slider in Vue js not reactively displaying images?

Images arrive from the server (3-4 pieces each) and are transferred to the slider component for display.
Images always come right, everything is in order. But in the slider, they are either not updated at all, or with a long delay (3-5-7 seconds). I tried adding filetime to each image via computed, but that didn't help.

Is it possible to overcome this somehow?
Thanks in advance.

Component Code (Slider):

<template>
  <div style="min-height: 300px" v-if="item.images">
    <div v-if="item.images.length > 1">
      <VueSlickCarousel :arrows="true" :dots="false">
        <img
          class="w-100"
          v-for="img in (imagesFT = item.images)"
          :key="img.id"
          :src="img.image"
        />
      </VueSlickCarousel>
    </div>
    <div v-else>
      <img
        class="w-100"
          v-for="img in (imagesFT = item.images)"
         :key="img.id"
         :src="img.image"
      />
    </div>
  </div>
</template>

<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {
  name: 'SliderConfigurator',
  data: () => ({
    src: 'https://templatesite.ru/images/items/',
  }),
  components: {
    VueSlickCarousel
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {},
  computed: {
    imagesFT: {
      get: function() {
        return this.item.images
      },
      set: function(images) {
        images.map( el => el.image + "?" + new Date().getTime() )
        console.log(images)
        this.item.images = images
      }
    }
  },
  mounted() {},
}
</script>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
skyholder, 2021-02-28
@skyholder

Add a property to the slider infinity:false, the slick makes clones of slides for looped scrolling, and apparently the pictures remain old in the slide clones, or you can update the slider through watch, it has a method this.$refs.slider[0].slick.refresh()like this

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question