[英]How can I make a Swiper slider like App Store?
我想用 Swiperjs 制作一個 slider,就像 Apple App Store 輪播一樣(你可以在游戲選項卡上看到)。
我試圖在 Vue Swiper(vue 的 package)中制作它:
HTML 代碼:
<div id="app">
<h1>Slider</h1>
<!-- Slider main container -->
<vue-swiper url="http://www.google.com"></vue-swiper>
<div>
CSS:
ody {
background: #f0f0f0;
font-family: Tahoma;
}
#app{
width:400px;
height:700px;
background:white;
margin: auto;
border-radius: 10px;
}
h1 {
padding: 30px 10px 0 10px;
}
.swiper-container {
padding-top: 10px;
width: 100%;
height: 180px;
}
.swiper-slide {
width: 300px;
border-radius: 5px;
text-align: center;
color: #fff;
background: url('https://i.vimeocdn.com/video/376634544.jpg?mw=1920&mh=1080&q=70');
background-size: cover;
}
Javascript 代碼:
ue.component('vue-swiper', {
data: function() {
return {
imageItems:[]
};
},
props:['url'],
mounted: function () {
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: 'auto',
spaceBetween: 10,
centeredSlides:true,
direction: 'horizontal',
loop: false,
// pagination: '.swiper-pagination',
// paginationType:'bullets',
nextButton: false,
prevButton: false,
});
},
template:`
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
// <div class="swiper-pagination"></div>
</div>
`
});
var app = new Vue({
el: '#app',
data: {
},
})
如何讓第一張幻燈片向左浮動,最后一張幻燈片向右浮動,如下所示:
在我的代碼中,第一張幻燈片和最后一張幻燈片居中。
我想我真的解決了我的問題。
在安裝時,當Swiper啟動時,我添加了自定義樣式
on: {
init: function () {
document.getElementById('wrapper').style.transform = "translate3d(10px, 0px, 0px)"
},
}
接觸時(滑動事件)
mySwiper.on('touchEnd', function () {
setTimeout(() => {
if (mySwiper.activeIndex == 0) {
document.getElementById('wrapper').style.transform = "translate3d(10px, 0px, 0px)"
}
if (mySwiper.activeIndex == mySwiper.slides.length - 1) {
var translate_last = mySwiper.snapGrid[mySwiper.activeIndex] + mySwiper.snapGrid[0] + 10;
var translate_style = 'translate3d(-' + translate_last + 'px, 0px, 0px)';
document.getElementById('wrapper').style.transform = translate_style
}
}, 10);
});
檢查我的新Codepen
你只在最后觸發事件。 如果你向后滑動,它不會將幻燈片轉換回初始部分。
將其更改為 mySwiper.on('progress', ...
swiper.on('progress', function(){
setTimeout(() => {
if (swiper.activeIndex == 0) {
$(".swiper-slide").css('transform', 'translate3d(125px, 0px, 0px)');
}
if (swiper.activeIndex == swiper.slides.length - 1) {
var translate_last = swiper.snapGrid[swiper.activeIndex] + swiper.snapGrid[0] + 10;
var translate_style = 'translate3d(-' + translate_last + 'px, 0px, 0px)';
$(".swiper-slide").css('transform', translate_style);
}
}, 10);
swiper.on('reachEnd', function(){
$(".swiper-slide").css('transform', 'translate3d(0px, 0px, 0px)');
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.