I'm facing a bit of challenge with this question, and I hope someone can help me find a solution.
Currently, I am utilizing vue-awesome-swiper (). My goal is to achieve the following layout:
An initial left margin of 10%: https://i.sstatic.net/AoLhK.png
When inner slides are visible, they should stretch to full width from left to right: https://i.sstatic.net/Xg4qu.png
Upon reaching the last slide, there should be a 10% margin on the right: https://i.sstatic.net/sN08O.png
You can refer to examples here: .
To implement the initial margin, I added margin-left:10%; to the swiper-wrapper class. However, this causes the last slide to be covered as the content shifts by 10%. I would like the margin-left to be removed when the last slide is reached and vice versa.
I have explored using events(): reachEnd and reachBeginning, and attempted to apply them in the following way:
<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>
However, the above code implementation does not add margin to the right at the end. Can anyone provide guidance on how I can achieve this desired outcome?