vue - 如何在 Slick-carousel 中的弹性项目之间制作间隙答案

【问题标题】：vue - how to make gap between flex item in Slick-carouselvue - 如何在 Slick-carousel 中的弹性项目之间制作间隙
【发布时间】：2021-12-11 14:06:33
【问题描述】：

这是我目前的 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

【问题讨论】：

标签： javascript css vue.js vuejs2

【解决方案1】：

如果您查看examples on the npm package itself，幻灯片之间的间距是通过使用额外的<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

【讨论】：