fe / yohobuywap-node · Commits

Go to a project

Authored by 李靖
Commit c1d263d7822e1423d4ec713ecd6738d88746f334 1 parent 56ae011b

swiper优化

Inline Side-by-side
Showing 3 changed files with 36 additions and 9 deletions
... ... @@ -33,7 +33,7 @@
<a href="https://www.baidu.com/">
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">
<div class="cover"></div>
<div class="title">搭配</div>
<div class="title">11</div>
</div>
</a>
</div>
... ... @@ -41,7 +41,7 @@
<a href="https://www.baidu.com/">
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">
<div class="cover"></div>
<div class="title">搭配</div>
<div class="title">22</div>
</div>
</a>
</div>
... ... @@ -49,7 +49,7 @@
<a href="https://www.baidu.com/">
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">
<div class="cover"></div>
<div class="title">搭配</div>
<div class="title">33</div>
</div>
</a>
</div>
... ... @@ -57,7 +57,7 @@
<a href="https://www.baidu.com/">
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">
<div class="cover"></div>
<div class="title">搭配</div>
<div class="title">44</div>
</div>
</a>
</div>
... ... @@ -65,7 +65,7 @@
<a href="https://www.baidu.com/">
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">
<div class="cover"></div>
<div class="title">搭配</div>
<div class="title">55</div>
</div>
</a>
</div>
... ... @@ -73,7 +73,7 @@
<a href="https://www.baidu.com/">
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">
<div class="cover"></div>
<div class="title">搭配</div>
<div class="title">66</div>
</div>
</a>
</div>
... ... @@ -81,7 +81,7 @@
<a href="https://www.baidu.com/">
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">
<div class="cover"></div>
<div class="title">搭配</div>
<div class="title">77</div>
</div>
</a>
</div>
... ...
... ... @@ -34,7 +34,7 @@ class GuangNew extends Page {
// 频道swiper
swiperTab() {
if ($('.swiper-tab').length > 0) {
let preWidth = $(window).width() / 750 * 104 * 2; // 向左位移两个swiper-slide宽度，相对于750宽度下
let preWidth = $(window).width() / 750 * -115; // 向左位移一个swiper-slide宽度，相对于750宽度下
new Swiper('.swiper-tab .swiper-container', {
effect: 'coverflow',
... ... @@ -43,6 +43,8 @@ class GuangNew extends Page {
slidesPerView: 'auto',
followFinger: false,
slidesOffsetBefore: preWidth,
centeredSlides: true,
speed: 800,
coverflow: {
rotate: 0,
stretch: 0,
... ... @@ -64,12 +66,13 @@ class GuangNew extends Page {
centeredSlides: true,
slidesPerView: 'auto',
followFinger: false,
loop: true,
coverflow: {
rotate: 0,
stretch: 0,
depth: 0,
modifier: 1,
slideShadows: true
slideShadows: false
}
});
}
... ...
... ... @@ -203,11 +203,35 @@ html {
margin-bottom: 56px;
box-shadow: 0 0 20px #bbb;
transform: translateX(0) !important;
.page-c {
height: 580px;
opacity: 0;
}
}
.swiper-slide-active {
.page-c {
height: auto !important;
opacity: 1 !important;
}
}
.swiper-slide-prev {
.page-c {
height: auto !important;
opacity: 1 !important;
}
}
.swiper-slide-next {
transform: translateY(-610px) !important;
width: 630px;
.page-c {
height: auto !important;
opacity: 1 !important;
}
}
.swiper-slide-next + div {
... ...