[英]vue - how to make gap between flex item in Slick-carousel
这是我目前的 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>
代码沙盒:
https://codesandbox.io/s/empty-leftpad-ti367?file=/src/components/HelloWorld.vue
如果您查看npm 包本身的示例,幻灯片之间的间距是通过用额外的<div>
元素包裹每张幻灯片然后在内部添加边距来实现的。
最好的办法是更新你的 DOM,方法是用额外的<div>
包裹你的.slick-item
元素:
<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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.