This is probably an easy question but I can't seem to find a solution to this..
I am using vue-awesome-swiper(https://github.surmon.me/vue-awesome-swiper/). I would like to have something like this:
Initial margin on the left by 10%:
When the inner slides are visible, they are touching left and right(full width stretch):
When the last slide is reached, a margin-right of 10%:
Examples can be found here: https://github.surmon.me/vue-awesome-swiper/.
I added margin-left:10%; to the swiper-wrapper class which works for me as the initial margin, but this covers my last slide as the content is shift by 10%. I would like margin-left to be removed when the last slide is reached and vice versa.
I tried looking at events(https://swiperjs.com/api/#events): reachEnd and reachBeginning. Both of these, I tried to apply like this:
<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>
The above does not add margin to the right at the end. How can I achieve this goal?