vue-slick sliding arrows are not visible in vuejs component - vue.js

Question

I am working with vue-slick(v-1.1.15) in vuejs to show some sliding images. Although the images are auto-slidable but I also need arrows to make them slide manually.
The problem is instead of those arrows, two buttons "Next" and "Previous" are being shown.
I have also imported the .css file for vue-slick to get it work, but useful results were found.
Below is my code:
<template>
<div>
<div class="idb-full-block">
<slick ref="slick" :options="slickOptions" v-if="someVar !== null">
<div class="content-wrap" v-for="var in someVar" :key="var.img">
<div class="idb-block-content p-20">
<div class="pp-image mb-20 d-flex justify-content-center align-items-center">
<img :src="var.img" class="img-fluid" alt="pp" width="" height="" />
</div>
<div class="d-flex justify-content-between mb-10">
<h5 class="mb-0">{{var.title}}</h5>
<h5 class="text-danger mb-0 fw-bold">{{var.price}}</h5>
</div>
<div class="pp-ratings">
<i v-for="(stars, index) in 5" :key="index" class="fa fa-star text-warning"></i>
</div>
</div>
<ul class="pp-stats footer-border">
<li class="w-33">
<h4 class="fw-bold">{{var.sales}}</h4>
</li>
<li class="w-33">
<h4 class="fw-bold">{{var.rating}}</h4>
</li>
<li class="w-33">
<h4 class="fw-bold">{{var.comments}}</h4>
</li>
</ul>
</div>
</slick>
</div>
</div>
<script>
import Slick from "vue-slick";
import { someVar } from "./someVar.js";
import `node_modules/slick-carousel/slick/slick.css`;
export default {
components: {
Slick
},
data() {
return {
someVar,
slickOptions: {
slidesToShow: 1,
arrows: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
},
}
},
};
</script>
Any kind of help would be appreciated.

Answer 1

I Found the answer in other Question
You need to
Making sure you passing arrows props as true
the default color and background is white so you need to change
it first if your website is white.
Using slot {nextArrow, prevArrow }
.slick-prev:before,
.slick-next:before {
color: red !important;
}
<template #prevArrow="arrowOption">
<div class="custom-arrow">
{{ arrowOption.currentSlide }}/{{ arrowOption.slideCount }}
</div>
</template>
<template #nextArrow="arrowOption">
<div class="custom-arrow">
{{ arrowOption.currentSlide }}/{{ arrowOption.slideCount }}
</div>
</template>