javascript - 如何制作像 App Store 这样的 Swiper 滑块?
问题描述
我想用 Swiperjs 制作一个滑块,比如 Apple App Store 轮播(你可以在游戏选项卡上看到)。
我试图在 Vue Swiper(vue 的一个包)中制作它:
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
推荐阅读
- android - 一张使用不同 postkey 上传的图片,但我想将所有图片存储在 Firebase 数据库中的一个 postkey 下
- html - 我有一个图像作为 div 内的背景。我想让图片适合响应式
- python - 无法使用 split_on_silence() 分割音频
- c++ - C++ - 空 std::list begin() 和 end() 不相等
- javascript - AngularJS ng-click 无法正常工作
- lambda - 如何按多个字段分组,结果是列表
- powershell - PowerShell 异常捕获
- java - Jsoup 无法解析查询
- php - 相同名称可用于具有相同模块名称的模块外部控制器
- oracle - Join not working in Oracle 错误是 nctb : phone_number invalid identifier