처음에 슬라이드 컨테이너를 왼쪽 여백에서 10% 떨어져 있고 끝에 도달하면 오른쪽 여백에서 10% 떨어져 있도록 설정하려면 어떻게 해야 합니까?(vue-swiper)

처음에 슬라이드 컨테이너를 왼쪽 여백에서 10% 떨어져 있고 끝에 도달하면 오른쪽 여백에서 10% 떨어져 있도록 설정하려면 어떻게 해야 합니까?(vue-swiper)

이것은 아마 쉬운 질문일 것입니다만, 해답을 찾을 수 없을 것 같습니다.

vue-swiper(https://github.surmon.me/vue-awesome-swiper/))를 사용하고 있습니다.저는 다음과 같은 것을 원합니다.

왼쪽의 초기 마진 10%:

안쪽 슬라이드가 보이면 왼쪽과 오른쪽(전폭 스트레칭):

마지막 슬라이드에 도달하면 10%의 마진권:

예를 들면, https://github.surmon.me/vue-awesome-swiper/ 를 참조해 주세요.

나는 덧붙였다.margin-left:10%;에게swiper-wrapper첫 번째 마진으로 사용할 수 있는 클래스입니다만, 컨텐츠가 10% 어긋나기 때문에, 이 슬라이드에 기재되어 있습니다.마지막 슬라이드에 도달했을 때 여백 왼쪽을 삭제하고, 그 반대도 하고 싶습니다.

이벤트(https://swiperjs.com/api/#http://https://swiperjs.com/api/): 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>

위의 내용은 오른쪽 끝에 여백을 추가하지 않습니다.어떻게 하면 이 목표를 달성할 수 있을까요?

비슷한 것이 필요했던 것이 생각나서 결국 나만의 롤러 부품을 만들게 되었습니다.하지만 모두를 위한 것은 아니다.

그럴만한 방법이 있는데 좀 더 깔끔한 방법을 찾길 바라.

첫 번째 슬라이드에는 여백이 있습니다.<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/vue-awesome-swiper@3.0.4/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>

이를 실현하는 방법은 오버플로우 속성을 설정하는 것입니다..swiper-container보이는 것, 필요한 여백이 있는 칸막이 안쪽에 놓고 다른 칸막이 바깥 칸막이의 속성을 부여한다.overflow: hidden다음과 같이 합니다.

<div style="overflow: hidden">
    <div style="margin: 0 1rem">
        <div class="swiper-container" style="overflow: visible">
            <!-- ... -->
        </div>
    </div>
</div>

또한 다른 방법이 있을 수 있습니다. 그것은 폭입니다..swiper-container100% 미만으로 모체 내에 배치되어 있는지 확인합니다만, 아직 시험해 본 적은 없습니다.

언급URL : https://stackoverflow.com/questions/61659324/how-can-i-initially-set-a-slide-container-to-be-10-away-from-left-margin-and-wh