Showing
4 changed files
with
82 additions
and
20 deletions
| @@ -123,10 +123,35 @@ $(function() { | @@ -123,10 +123,35 @@ $(function() { | ||
| 123 | reasonSwiper = new Swiper('.box-main', { | 123 | reasonSwiper = new Swiper('.box-main', { |
| 124 | paginationClickable: true, | 124 | paginationClickable: true, |
| 125 | direction: 'vertical', | 125 | direction: 'vertical', |
| 126 | - slidesPerView: 4, | ||
| 127 | - effect: 'coverflow', | 126 | + slidesPerView: 6, |
| 127 | + height: 200, | ||
| 128 | centeredSlides: true, | 128 | centeredSlides: true, |
| 129 | - initialSlide: 2 | 129 | + initialSlide: 3, |
| 130 | + onSlideChangeStart: function(reasonSwiper) { | ||
| 131 | + var activeIndex = reasonSwiper.activeIndex, | ||
| 132 | + slides = reasonSwiper.slides, | ||
| 133 | + i = 0; | ||
| 134 | + | ||
| 135 | + if (slides.length !== 1) { | ||
| 136 | + if (activeIndex === 0) { | ||
| 137 | + for (i = 1; i < slides.length; i++) { | ||
| 138 | + $(slides[i]).css('transform', ''); | ||
| 139 | + } | ||
| 140 | + } else if (activeIndex === slides.length - 1) { | ||
| 141 | + for (i = 0; i < activeIndex; i++) { | ||
| 142 | + $(slides[i]).css('transform', 'rotateX(' + (30 + (activeIndex - i) * 12) + 'deg)'); | ||
| 143 | + } | ||
| 144 | + } else { | ||
| 145 | + for (i = 0; i < activeIndex; i++) { | ||
| 146 | + $(slides[i]).css('transform', 'rotateX(' + (30 + (activeIndex - i) * 12) + 'deg)'); | ||
| 147 | + } | ||
| 148 | + for (i = activeIndex + 1; i < slides.length; i++) { | ||
| 149 | + $(slides[i]).css('transform', ''); | ||
| 150 | + } | ||
| 151 | + } | ||
| 152 | + } | ||
| 153 | + $(slides[activeIndex]).css('transform', ''); | ||
| 154 | + } | ||
| 130 | }); | 155 | }); |
| 131 | }); | 156 | }); |
| 132 | 157 |
| @@ -249,10 +249,35 @@ $(function() { | @@ -249,10 +249,35 @@ $(function() { | ||
| 249 | reasonSwiper = new Swiper('.box-main', { | 249 | reasonSwiper = new Swiper('.box-main', { |
| 250 | paginationClickable: true, | 250 | paginationClickable: true, |
| 251 | direction: 'vertical', | 251 | direction: 'vertical', |
| 252 | - slidesPerView: 4, | ||
| 253 | - effect: 'coverflow', | 252 | + slidesPerView: 6, |
| 253 | + height: 200, | ||
| 254 | centeredSlides: true, | 254 | centeredSlides: true, |
| 255 | - initialSlide: 2 | 255 | + initialSlide: 3, |
| 256 | + onSlideChangeStart: function(reasonSwiper) { | ||
| 257 | + var activeIndex = reasonSwiper.activeIndex, | ||
| 258 | + slides = reasonSwiper.slides, | ||
| 259 | + i = 0; | ||
| 260 | + | ||
| 261 | + if (slides.length !== 1) { | ||
| 262 | + if (activeIndex === 0) { | ||
| 263 | + for (i = 1; i < slides.length; i++) { | ||
| 264 | + $(slides[i]).css('transform', ''); | ||
| 265 | + } | ||
| 266 | + } else if (activeIndex === slides.length - 1) { | ||
| 267 | + for (i = 0; i < activeIndex; i++) { | ||
| 268 | + $(slides[i]).css('transform', 'rotateX(' + (30 + (activeIndex - i) * 12) + 'deg)'); | ||
| 269 | + } | ||
| 270 | + } else { | ||
| 271 | + for (i = 0; i < activeIndex; i++) { | ||
| 272 | + $(slides[i]).css('transform', 'rotateX(' + (30 + (activeIndex - i) * 12) + 'deg)'); | ||
| 273 | + } | ||
| 274 | + for (i = activeIndex + 1; i < slides.length; i++) { | ||
| 275 | + $(slides[i]).css('transform', ''); | ||
| 276 | + } | ||
| 277 | + } | ||
| 278 | + } | ||
| 279 | + $(slides[activeIndex]).css('transform', ''); | ||
| 280 | + } | ||
| 256 | }); | 281 | }); |
| 257 | }); | 282 | }); |
| 258 | 283 |
| @@ -218,6 +218,7 @@ | @@ -218,6 +218,7 @@ | ||
| 218 | color: #444; | 218 | color: #444; |
| 219 | background: #fff; | 219 | background: #fff; |
| 220 | border-radius: 10px; | 220 | border-radius: 10px; |
| 221 | + padding-bottom: 20px; | ||
| 221 | 222 | ||
| 222 | .box-head { | 223 | .box-head { |
| 223 | height: 60px; | 224 | height: 60px; |
| @@ -232,23 +233,28 @@ | @@ -232,23 +233,28 @@ | ||
| 232 | background: #FFFFFF; | 233 | background: #FFFFFF; |
| 233 | padding: 20px; | 234 | padding: 20px; |
| 234 | height:480px; | 235 | height:480px; |
| 235 | - margin-top: 40px; | ||
| 236 | } | 236 | } |
| 237 | 237 | ||
| 238 | li { | 238 | li { |
| 239 | text-align: center; | 239 | text-align: center; |
| 240 | - height: 36px; | ||
| 241 | - font-size: 24px; | ||
| 242 | - line-height: 36px; | ||
| 243 | background: #FFF; | 240 | background: #FFF; |
| 244 | color: rgba(0, 0, 0, .5); | 241 | color: rgba(0, 0, 0, .5); |
| 242 | + font-size: 38px; | ||
| 245 | } | 243 | } |
| 246 | 244 | ||
| 247 | .swiper-slide-active { | 245 | .swiper-slide-active { |
| 248 | - font-size: 36px; | 246 | + padding-top: 0; |
| 247 | + font-style: normal; | ||
| 248 | + border-top: 1px solid rgb(223,224,224); | ||
| 249 | + border-bottom: 1px solid rgb(223,224,224); | ||
| 250 | + font-size: 38px; | ||
| 249 | color: rgb(0,0,0); | 251 | color: rgb(0,0,0); |
| 250 | - height: 48px; | ||
| 251 | - line-height: 96px; | 252 | + height: 78px !important; |
| 253 | + line-height: 78px; | ||
| 254 | + } | ||
| 255 | + | ||
| 256 | + .swiper-slide { | ||
| 257 | + line-height: 70px; | ||
| 252 | } | 258 | } |
| 253 | } | 259 | } |
| 254 | } | 260 | } |
| @@ -25,6 +25,7 @@ | @@ -25,6 +25,7 @@ | ||
| 25 | color: #444; | 25 | color: #444; |
| 26 | background: #fff; | 26 | background: #fff; |
| 27 | border-radius: 10px; | 27 | border-radius: 10px; |
| 28 | + padding-bottom: 20px; | ||
| 28 | 29 | ||
| 29 | .box-head { | 30 | .box-head { |
| 30 | height: 60px; | 31 | height: 60px; |
| @@ -39,23 +40,28 @@ | @@ -39,23 +40,28 @@ | ||
| 39 | background: #FFFFFF; | 40 | background: #FFFFFF; |
| 40 | padding: 20px; | 41 | padding: 20px; |
| 41 | height:480px; | 42 | height:480px; |
| 42 | - margin-top: 40px; | ||
| 43 | } | 43 | } |
| 44 | 44 | ||
| 45 | li { | 45 | li { |
| 46 | text-align: center; | 46 | text-align: center; |
| 47 | - height: 36px; | ||
| 48 | - font-size: 24px; | ||
| 49 | - line-height: 36px; | ||
| 50 | background: #FFF; | 47 | background: #FFF; |
| 51 | color: rgba(0, 0, 0, .5); | 48 | color: rgba(0, 0, 0, .5); |
| 49 | + font-size: 38px; | ||
| 52 | } | 50 | } |
| 53 | 51 | ||
| 54 | .swiper-slide-active { | 52 | .swiper-slide-active { |
| 55 | - font-size: 36px; | 53 | + padding-top: 0; |
| 54 | + font-style: normal; | ||
| 55 | + border-top: 1px solid rgb(223,224,224); | ||
| 56 | + border-bottom: 1px solid rgb(223,224,224); | ||
| 57 | + font-size: 38px; | ||
| 56 | color: rgb(0,0,0); | 58 | color: rgb(0,0,0); |
| 57 | - height: 48px; | ||
| 58 | - line-height: 96px; | 59 | + height: 78px !important; |
| 60 | + line-height: 78px; | ||
| 61 | + } | ||
| 62 | + | ||
| 63 | + .swiper-slide { | ||
| 64 | + line-height: 70px; | ||
| 59 | } | 65 | } |
| 60 | } | 66 | } |
| 61 | } | 67 | } |
-
Please register or login to post a comment