我怎样才能将幻灯片容器初始设置为离左边缘10%的距离，当到达终点时，离右边缘10%的距离？(vue-awesome-swiper)

Question

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

我正在使用vue-awesome-swiper(https:/github.surmon.mevue-awesome-swiper。). 我希望有这样的东西。

左边的初始边距为10%:

当里面的幻灯片可见时，它们左右相接（全宽拉伸）。

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

例子可以在这里找到。https:/github.surmon.mevue-awesome-swiper。.

我补充道 margin-left:10%; 至 swiper-wrapper 类，它可以作为我的初始页边距，但它覆盖了我的最后一张幻灯片，因为内容被移动了10%。我希望当到达最后一张幻灯片时，margin-left能够被移除，反之亦然。

我试着在事件(https:/swiperjs.comapi#events): 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>

上面的内容并没有在结尾处向右加边距。如何实现这个目标？

Answer 1

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

有一个黑客的方法，我希望你能找到更干净的东西。

第一张幻灯片有一个空白<swiper-slide style="margin-left:10%;">I'm Slide 1</swiper-slide>

而最后一张幻灯片是看不见的 <swiper-slide style="opacity:0;"></swiper-slide>

Vue.use(VueAwesomeSwiper)
new Vue({
  el: '#vueapp',
  components: {
    LocalSwiper: VueAwesomeSwiper.swiper,
    LocalSlide: VueAwesomeSwiper.swiperSlide,
  },
  data: {
    swiperOptionA: {

      slidesPerView: 4,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    },
  },
  computed: {
    swiperA() {
      return this.$refs.awesomeSwiperA.swiper
    },
  },
})

.swiper-container {
  height: 300px;
  width: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  background-color: #eee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-awesome-swiper.js"></script>

<div id="vueapp">
    <swiper ref="awesomeSwiperA" :options="swiperOptionA">
      <!-- slides -->
      <swiper-slide style="margin-left:10%;">I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>
      <swiper-slide>I'm Slide 5</swiper-slide>
      <swiper-slide>I'm Slide 6</swiper-slide>
      <swiper-slide>I'm Slide 7</swiper-slide>
      <swiper-slide style="opacity:0;"></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <br>
</div>