Javascript 如何在开始时将幻灯片容器设置为距左边框10%，到达末尾时距右边框10%？（vue超级泳衣）

这可能是一个简单的问题，但我似乎找不到解决办法

我使用的是vue超级泳衣。我想要这样的东西：

<template>
<div>
      <swiper
        class="swiper"
        :options="swiperOption"
        :reach-beginning="handleTransitionStart"
        :reach-end="handleTransitionEnd"
        :style="transitionStarted ? { margin: '0 0 0 10%' } : { margin: '0 10% 0 0' }"

      >
.....
</swiper>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class InformationSection extends Vue {
  @Prop() 'reachEnd'!: any;
  @Prop() 'reachBeginning'!: any;

  swiperOption = {
    slidesPerView: 4,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  };

  transitionStarted: boolean = true;

  handleTransitionStart(): any {
    // eslint-disable-next-line no-console
    console.log('Started');
    this.transitionStarted = true;
  }

  handleTransitionEnd(): any {
    // eslint-disable-next-line no-console
    console.log('Ended');
    this.transitionStarted = false;
  }
}
</script>

<style scoped>

  .swiper-slide {
    width: 60%;
  }
  .swiper-slide:nth-child(2n) {
      width: 40%;
  }
  .swiper-slide:nth-child(3n) {
      width: 20%;
  }

</style>

左边的初始保证金为10%：

当内部幻灯片可见时，它们接触左侧和右侧全宽拉伸：

到达最后一张幻灯片时，右边的边距为10%：

示例可在此处找到：

我加了左边的边距：10%；对于swiper包装类，它作为初始保证金对我有效，但这涵盖了我的最后一张幻灯片，因为内容移动了10%。我希望在到达最后一张幻灯片时删除左边的空白，反之亦然

我试着观察事件：reachEnd和reachBeginning。这两项，我都试着这样申请：

<template>
<div>
      <swiper
        class="swiper"
        :options="swiperOption"
        :reach-beginning="handleTransitionStart"
        :reach-end="handleTransitionEnd"
        :style="transitionStarted ? { margin: '0 0 0 10%' } : { margin: '0 10% 0 0' }"

      >
.....
</swiper>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class InformationSection extends Vue {
  @Prop() 'reachEnd'!: any;
  @Prop() 'reachBeginning'!: any;

  swiperOption = {
    slidesPerView: 4,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  };

  transitionStarted: boolean = true;

  handleTransitionStart(): any {
    // eslint-disable-next-line no-console
    console.log('Started');
    this.transitionStarted = true;
  }

  handleTransitionEnd(): any {
    // eslint-disable-next-line no-console
    console.log('Ended');
    this.transitionStarted = false;
  }
}
</script>

<style scoped>

  .swiper-slide {
    width: 60%;
  }
  .swiper-slide:nth-child(2n) {
      width: 40%;
  }
  .swiper-slide:nth-child(3n) {
      width: 20%;
  }

</style>

---

以上内容不会在末尾的右侧添加边距。如何实现这一目标？

我记得我需要类似的东西，最终构建了自己的滚动条组件。但这并不适合所有人

有一种很简单的方法，我希望你能找到更干净的

第一张幻灯片有空白 我是幻灯片1

最后一张幻灯片是看不见的

Vue.useVueAwesomeSwiper 新Vue{ el:‘vueapp’， 组成部分：{ LocalSwiper:VueAwesomeSwiper.swiper， 本地幻灯片：VueAwesomeSwiper.swiperSlide， }, 数据：{ swiperOptionA：{ 幻灯片视图：4， 空间期:30,， 分页：{ el:“.swiper分页”， 可点击：正确， }, 导航：{ nextEl:“.swiper按钮下一步”， prevEl:“.swiper按钮prev” } }, }, 计算：{ swiperA{ 返回此。$refs.awesomeSwiperA.swiper }, }, } .swiper容器{ 高度：300px； 宽度：100%； } .滑梯{ 文本对齐：居中； 字号：38px； 字号：700； 背景色：eee； 显示：-网络工具包盒； 显示：-ms flexbox； 显示器：flex； -webkit盒包：中心； -ms-flex-pack:center； 证明内容：中心； -webkit框对齐：居中； -ms-flex-align：居中； 对齐项目：居中； } 我是幻灯片1 我是幻灯片2 我是幻灯片3 我是幻灯片4 我是幻灯片5 我是幻灯片6 我是幻灯片7

---

我记得我需要一些类似的东西，并最终建立了自己的滚动组件。但这并不适合所有人

有一种很简单的方法，我希望你能找到更干净的

第一张幻灯片有空白 我是幻灯片1

最后一张幻灯片是看不见的

Vue.useVueAwesomeSwiper 新Vue{ el:‘vueapp’， 组成部分：{ LocalSwiper:VueAwesomeSwiper.swiper， 本地幻灯片：VueAwesomeSwiper.swiperSlide， }, 数据：{ swiperOptionA：{ 幻灯片视图：4， 空间期:30,， 分页：{ el:“.swiper分页”， 可点击：正确， }, 导航：{ nextEl:“.swiper按钮下一步”， prevEl:“.swiper按钮prev” } }, }, 计算：{ swiperA{ 返回此。$refs.awesomeSwiperA.swiper }, }, } .swiper容器{ 高度：300px； 宽度：100%； } .滑梯{ 文本对齐：居中； 字号：38px； 字号：700； 背景色：eee； 显示：-网络工具包盒； 显示：-ms flexbox； 显示器：flex； -webkit盒包：中心； -ms-flex-pack:center； 证明内容：中心； -webkit框对齐：居中； -ms-flex-align：居中； 对齐项目：居中； } 我是幻灯片1 我是幻灯片2 我是幻灯片3 我是幻灯片4 我是幻灯片5 我是幻灯片6 我是幻灯片7