Vue Slick Carousel unable to show

currently i would like to make a carousel which i want to get the data from my api. So far the api data is no prob, i am able to get all the data but the problem is the VueSLick Carousel display my data in a verticle ,the arrow isnt showing & styling in my b-card not working.

        <VueSlickCarousel v-bind="slider_setting" v-if="mydetails.length > 0">
                    <div v-for="(item,index) in mydetails" :key="index" >
                        <b-card v-if="item.add_new == true "
                        style="background:#EEF3F7; height:170px;
                        border-radius: 15px"         
                        >
                            
                            <div class="d-flex justify-content-center" style="gap:10px; align-items:center; margin-top:50px"><b-icon icon="plus-circle-fill" variant="info" font-scale="2" class="add-more-icon"   @click="$router.push('/add-new')"></b-icon>
                                <span>Add New Detail</span>
                            </div>                 
                                   
                        </b-card>

                        <b-card v-else @click="$router.push({path: 'edit-profile/' + item.id})"                 
                         style="background:#FFB7B7;border-radius: 15px; height:170px" > 
                         <b-row class="text-center ml-md-auto p-4 "  >
                            <b-col cols="4" >
                                   <b-avatar :src="item.my_img" class=" border border-white" alt="Image" size="5em"></b-avatar>
                            </b-col>
                            <b-col  class="text-left"> 
                                <span  style="font-weight:bold;">{{item.my_name}}</span>           
                            </b-col>  
                         </b-row>      
                        </b-card>                                                   
                    </div>
                </VueSlickCarousel>

script

<script>
  import VueSlickCarousel from 'vue-slick-carousel';
   import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';
   import 'vue-slick-carousel/dist/vue-slick-carousel.css';
  
  export default {
      components: {
          VueSlickCarousel
      },
      computed: {
      },
  
      data: () => ({
          mydetails:[],
          slider_setting: {
            "dots": true,
             "dotsClass": "slick-dots custom-dot-class",
             "edgeFriction": 0.35,
             "infinite": false,
             "speed": 500,
             "slidesToShow": 1,
             "slidesToScroll": 1,
             "arrows":true
            
           }    
      }),

 methods: {
          init()
          {
              this.getMyDetails();
  
          },

          getMyDetails(){      
           
            if(this.mydetails==null)
                 {
                   this.mydetails.push({"add_new":true});
                 }


            axios.get('/api/profile/get_my_info')
           
            .then((response) => response.data)
            .then((response) => {
                 this.mydetails= response.data.result;
               

                 this.mydetails.push({"add_new":true});
                         
               })
            .catch((error) => {
                let error_msg = error.response.message;
                console.log(error);
                this.error_msg = error_msg;
                this.$bvToast.toast(error_msg,{ variant:'danger', noCloseButton: true, solid:true})
                
            });                
       },       

SO at last the ouput i want is once i swipe left it will show my another detail and the url will change according to the id