create vue/nuxt slick carousel for dynamic content

file_name.vue

<template >
    <div>
    <div class="w-full">
        
            <VueSlickCarousel ref="carousel" v-if="bannerObj.length"> <div v-for="(i, id) in bannerObj" :key="id" >
            
                    <img :src="'http://127.0.0.1:8000' + i.image" alt="">
            </div>
         
        
            </VueSlickCarousel>

        
        
  </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 {
    data(){
        return{
            bannerObj:[],
            serverAddress:'',
            settings:{
                "dots": true,
                "dotsClass": "slick-dots custom-dot-class",
                "edgeFriction": 0.35,
                "infinite": false,
                "speed": 500,
                "slidesToShow": 1,
                "slidesToScroll": 1
            }

        }
    },
    components: { VueSlickCarousel },
    computed:{
        serverAdd(){
            this.serverAddress = process.env.server
        }

    },
    async created(){
        
        try{
            this.bannerObj = await this.$axios.$get('getBanner/')
            
            
        }
        catch({response}){
            console.log(response)
        }

    }
}
</script>
<style lang="">
    
</style>

step-1.md

npm i vue-slick-carousel

thank you for the example, this usefull.