This is my current Slick Carousel.
There are 4 items in a row, and I am looking to insert some margin between each item while maintaining the existing aspect-ratio: 1.3/1;
I'm struggling with overriding the classes from vue-slick-carousel. Does anyone have any tips on how to achieve this?
HelloWorld.vue
<template>
<div class="slick">
<VueSlickCarousel
v-bind="{
arrow: true,
focusOnSelect: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
touchThreshold: 5,
}"
>
<div class="slick-item">1</div>
<div class="slick-item">2</div>
<div class="slick-item">3</div>
<div class="slick-item">4</div>
<div class="slick-item">5</div>
<div class="slick-item">6</div>
<template #prevArrow="">
<button class="arrow-btn">
<img src="@/assets/images/common/arrow-right.svg" alt="arrow-left" />
</button>
</template>
<template #nextArrow="">
<button class="arrow-btn">
<img src="@/assets/images/common/arrow-right.svg" alt="arrow-left" />
</button>
</template>
</VueSlickCarousel>
</div>
</template>
<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
export default {
components: { VueSlickCarousel },
};
</script>
<style scoped lang="scss">
// override default class
.slick-slider {
display: flex;
align-items: center;
border: 1px solid grey;
}
.slick-item {
aspect-ratio: 1.3/1;
max-width: 280px;
margin-left: 10px;
background-color: #e5e5e5;
}
.arrow-btn {
border: none;
img {
height: 40px;
}
}
</style>
Codesandbox:
https://codesandbox.io/s/empty-leftpad-ti367?file=/src/components/HelloWorld.vue