This is my current Slick Carousel.
There are 4 items in a row, and I want to add margin between each item without changing current aspect-ratio: 1.3/1;
I find that I have difficulty to override the vue-slick-carousel
classes. Is Anyone know how to do it?
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
CodePudding user response:
If you look at the examples on the npm package itself, spacing between slides are achieved by wrapping each slide with an additional <div>
element and then adding margins to the inner one.
Your best bet is to update your DOM as such, by wrapping your .slick-item
element with an additional <div>
:
<div><div class="slick-item">1</div></div>
Then in your CSS it is a matter of adding an arbitrary horizontal margin, e.g. margin: 0 5px
to achieve a 10px spacing between each slide:
.slick-item {
margin: 0 5px;
background-color: #e5e5e5;
aspect-ratio: 1.3/1;
max-width: 280px;
}
See proof-of-concept example: https://codesandbox.io/s/charming-bas-b78ke?file=/src/components/HelloWorld.vue