关于swiper第一屏满屏，第二屏大于一屏怎么处理

dom

 1 <div class="swiper-container swiper-container-v">
 2     <div class="swiper-wrapper">
 3         <div class="swiper-slide">
 4             <img src="<?php echo ZK_STATIC; ?>images/index.gif" alt="" class='index_gif'>
 5             <p class='more'></p>
 6         </div>
 7         <div class="swiper-slide">
 8             <div class="swiper-container swiper-container-scrollbar">
 9                 <div class="swiper-wrapper">
10                     <div class="swiper-slide">
11                         <img src="<?php echo ZK_STATIC; ?>images/index2.png" alt="" class='index2'>
12                         <!-- 我的图片大于一屏要可以往下滑 -->
22                     </div>
23                 </div>
24                 <div class="swiper-scrollbar"></div>
25             </div>
26         </div>

27     </div>
28 </div>

 

 

css

 1 html, body{
 2     height: 100%;
 3     color:#000;
 4     
 5     -webkit-tap-highlight-color:rgba(0,0,0,0);
 6     background: #bce3f9;
 7 }
 8 .swiper-container{
 9     max-width: 10rem;
10     width:10rem;
11     height: 100%;
12     margin:0 auto;
13     background: #bce3f9;
14     /*display: none;*/
15 }
16 .swiper-container-scrollbar .swiper-slide{
17     height: auto;
18 
19 }

 

 

js:

 1 var swiperV = new Swiper('.swiper-container-v', {
 2             direction: 'vertical'
 3         });
 4 
 5 
 6 
 7         var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
 8             scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
 9             direction: 'vertical',
10             slidesPerView: 'auto',
11             mousewheelControl: true,
12             freeMode: true,
13             nested: true
14         });

 

posted @ 2017-10-24 17:13  伶丶AM  阅读(1934)  评论(0)  编辑  收藏  举报