Dots and arrows missing on load

[JMartinesGH]

The dots and arrows are not loaded on the first load of my app, only when I leave the router view and return do the dots and arrows show up in the dom.

<template>
  <div class="container">
    <VueSlickCarousel :arrows="true" :dots="true" :infinite="false">
      <Post
        v-for="post in posts"
        :key="post.id"
        :post="post"
        :category="category"
        carousel="true"
      />
    </VueSlickCarousel>
  </div>
</template>

<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

import Post from '@/components/Post.vue'
export default {
  components: {
    VueSlickCarousel,
    Post
  },
  props: {
    category: String,
    posts: Object
  }
}
</script>

<style lang="scss">
.slick-dots {
  position: absolute;
  z-index: 998;
  right: calc(20% + 30px);
  top: 95%;
  width: auto;
  li button::before {
    font-size: 8px;
    color: #c6dcd9;
  }
  li.slick-active button::before {
    color: #38827c;
  }
}
</style>

[haritha2112]

Try using slots for arrows and dots. That worked for me. You can find that in this example here under Customizing Arrows & Dots: https://gs-shop.github.io/vue-slick-carousel/#/api

[vindhaus]

I had to do this to get the arrows to show:

<style>
   .slick-next::before {
     color: black;
   }

   .slick-prev::before{
     color: black;
   }
</style>

[louisaoge]

Added margin around div. Apparently, the arrows were outside the viewport

[f3l1x]

I am using gridsome and in some cases arrows/dots were also hidden after some time or switching between pages.

I fix it using :key="$route.fullPath on slider component.

<vue-slick-carousel v-bind="config" :key="$route.fullPath">
 ...
</vue>

Maybe it could you folks.

[andrejrcarvalho]

I'm having a similar problem. I dynamically load the slider images from an array. When the image array changes from 5 images, for example, to one image, the arrows disappear. But when I add new images to the array and the array gets with more than one image, the arrows don't appear again.

[sscumac]

Had the same issue. What worked for me was using custom arrows placed outside of the slick carousel component and applied the appropriate method to it as described in the example on https://gs-shop.github.io/vue-slick-carousel/#/api under "calling methods".