這是我目前的 Slick Carousel。
連續有 4 個專案，我想在每個專案之間添加邊距而不改變當前aspect-ratio: 1.3/1;
我發現我很難覆寫這些vue-slick-carousel類。有人知道怎么做嗎？
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
uj5u.com熱心網友回復：
如果您查看npm 包本身的示例，幻燈片之間的間距是通過用附加<div>元素包裹每張幻燈片然后為內部元素添加邊距來實作的。
最好的辦法是更新你的 DOM，方法是.slick-item用一個額外的元素包裝你的元素<div>：
<div><div class="slick-item">1</div></div>
然后在您的 CSS 中添加任意水平邊距，例如margin: 0 5px在每張幻燈片之間實作 10px 間距：
.slick-item {
margin: 0 5px;
background-color: #e5e5e5;
aspect-ratio: 1.3/1;
max-width: 280px;
}
參見概念驗證示例：https : //codesandbox.io/s/charming-bas-b78ke?file=/src/components/HelloWorld.vue
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/338438.html
標籤：javascript css Vue.js Vuejs2
上一篇：如何為空輸入添加適當的類？