[英]How can I initially set a slide container to be 10% away from left margin and when reached the end, 10% away from right margin? (vue-awesome-swiper)
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/ ).我正在使用 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%:左侧初始保证金 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%:当到达最后一张幻灯片时,右边距为 10%:
Examples can be found here: https://github.surmon.me/vue-awesome-swiper/ .示例可以在这里找到: https://github.surmon.me/vue-awesome-swiper/ 。
I added margin-left:10%;
我添加了
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%.到
swiper-wrapper
class 这对我来说是初始边距,但这覆盖了我的最后一张幻灯片,因为内容移动了 10%。 I would like margin-left to be removed when the last slide is reached and vice versa.我希望在到达最后一张幻灯片时删除 margin-left ,反之亦然。
I tried looking at events( https://swiperjs.com/api/#events ): reachEnd
and reachBeginning
.我试着查看事件( https://swiperjs.com/api/#events ):
reachEnd
和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?
我怎样才能实现这个目标?
I recall needing something similar and ended up building my own scroller component.我记得需要类似的东西并最终构建了我自己的滚动组件。 But that's not for everyone.
但这并不适合所有人。
There's a hacky way to do it, and I hope you find something cleaner.有一种 hacky 方法可以做到这一点,我希望你能找到更干净的方法。
The first slide has a margin <swiper-slide style="margin-left:10%;">I'm Slide 1</swiper-slide>
第一张幻灯片有一个边距
<swiper-slide style="margin-left:10%;">I'm Slide 1</swiper-slide>
and the last slide is invisible <swiper-slide style="opacity:0;"></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>
slidesOffsetAfter幻灯片偏移后
slidesOffsetBefore slidesOffsetBefore
Ref: https://swiperjs.com/swiper-api#param-slidesOffsetAfter参考: https://swiperjs.com/swiper-api#param-slidesOffsetAfter
if($('.swiper').length !== 0){
const swiper = new Swiper('.swiper', {
loop: false,
slidesOffsetBefore: 5, // This is 5px slide offset
slidesPerView: 1.3, // second slide partial show (In this question it was probably 3.5)
centeredSlides: true // centering slides
spaceBetween: 10,
}
});}
The way I achieved this is to set the overflow property of .swiper-container
to visible, place it inside a div that has the required margin, and give another outer div the property of overflow: hidden
like so:我实现这一点的方法是将
.swiper-container
的溢出属性设置为可见,将其放置在具有所需边距的 div 中,并为另一个外部 div 提供overflow: hidden
,如下所示:
<div style="overflow: hidden">
<div style="margin: 0 1rem">
<div class="swiper-container" style="overflow: visible">
<!-- ... -->
</div>
</div>
</div>
There may also be another way which is to set the width of .swiper-container
less than 100% and ensure it is centred inside the parent element, but I haven't tried it out.可能还有另一种方法是将
.swiper-container
的宽度设置为小于 100% 并确保它在父元素内居中,但我还没有尝试过。
The problem I faced is a bit different, because it's not percentage but a mere 32px of margin left.我遇到的问题有点不同,因为它不是百分比,而是仅剩 32px 的边距。 I solved it by doing just css of these:
我只做了 css 就解决了这个问题:
.swiper-wrapper {
margin-left: 32px;
}
.swiper-wrapper .swiper-slide:last-child{
padding-right: 32px;
}
If I only add the margin-left to the.swiper-wrapper, the last slide will be cut 32px, hence I add the last slide to be 32px more wider by adding a padding-right.如果我只将 margin-left 添加到 the.swiper-wrapper,最后一张幻灯片将被剪切 32px,因此我通过添加 padding-right 将最后一张幻灯片添加到更宽的 32px。 Similar approach is you can use margin-right or:after selector to make the last slide wider.
类似的方法是您可以使用 margin-right 或:after 选择器来使最后一张幻灯片变宽。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.