Authored by 郭成尧

swiper-detail-adjust

@@ -2,20 +2,20 @@ @@ -2,20 +2,20 @@
2 <div class="bundle-nav"> 2 <div class="bundle-nav">
3 <div class="bundle-title">{{title}}</div> 3 <div class="bundle-title">{{title}}</div>
4 <div class="bundle-right"> 4 <div class="bundle-right">
  5 + <a href="">
5 <span class="bundle-desc">{{description}}</span> 6 <span class="bundle-desc">{{description}}</span>
6 <span class="iconfont">&#xe604;</span> 7 <span class="iconfont">&#xe604;</span>
  8 + </a>
7 </div> 9 </div>
8 </div> 10 </div>
9 <div class="bundle-product"> 11 <div class="bundle-product">
10 <div class="swiper-wrapper"> 12 <div class="swiper-wrapper">
11 {{# product_list}} 13 {{# product_list}}
12 - <div class="swiper-slide">  
13 - <div class="plus plus-{{@index}}"><span class="iconfont">&#xe624;</span></div>  
14 - <div class="product-box"> 14 + <div class="swiper-slide plus plus-{{@index}}"><span class="iconfont">&#xe624;</span></div>
  15 + <div class="swiper-slide product-box">
15 <a href="{{href}}"><img src="{{img}}" alt=""></a> 16 <a href="{{href}}"><img src="{{img}}" alt=""></a>
16 <div class="bundle-price">{{price}}</div> 17 <div class="bundle-price">{{price}}</div>
17 </div> 18 </div>
18 - </div>  
19 {{/ product_list}} 19 {{/ product_list}}
20 </div> 20 </div>
21 </div> 21 </div>
@@ -8,6 +8,7 @@ var $ = require('yoho-jquery'), @@ -8,6 +8,7 @@ var $ = require('yoho-jquery'),
8 $(function() { 8 $(function() {
9 new Swiper('.bundle-product', { 9 new Swiper('.bundle-product', {
10 freeMode: true, 10 freeMode: true,
11 - width: 130 11 + slidesPerView: 4,
  12 + lazyLoading: true
12 }); 13 });
13 }); 14 });
@@ -38,14 +38,13 @@ @@ -38,14 +38,13 @@
38 38
39 .swiper-wrapper { 39 .swiper-wrapper {
40 height: 295px; 40 height: 295px;
41 - width: 100%;  
42 41
43 - .swiper-slide {  
44 .plus { 42 .plus {
45 - float: left;  
46 margin-top: 88px; 43 margin-top: 88px;
47 - margin-right: 10px; 44 + margin-left: 5px;
  45 + margin-right: 5px;
48 color: #b0b0b0; 46 color: #b0b0b0;
  47 + width: 30px !important;
49 } 48 }
50 49
51 .plus-0 { 50 .plus-0 {
@@ -55,6 +54,9 @@ @@ -55,6 +54,9 @@
55 .product-box { 54 .product-box {
56 width: 155px; 55 width: 155px;
57 float: left; 56 float: left;
  57 +
  58 + a {
  59 + display: inline-block;
58 } 60 }
59 61
60 .bundle-price { 62 .bundle-price {