2016-07-05 67 views
0

我正在尋找Swiper滑塊和Photoswipe(或其他燈箱)的組合。結合Swiper滑塊和photoswipe

試圖在幻燈片中製作包含3種產品的產品滑塊。

每個產品有一個燈箱/模式與視頻和畫廊。 模態在產品div的邊界內生成。 當您點擊「打開圖庫」/「顯示視頻」鏈接時。燈箱打開全屏。

我遇到的問題是:燈箱不會(但必須)超出滑塊產品邊界的邊界。

尋找解決方案。

當產品幻燈片中單擊「打開模式」鏈接時,類似於空滑塊模式/燈箱容器外部的動態內容容器。

回答

0

而不是使用photoswipe,只用刷卡想在這個演示中,我沒有作出:
< ------- ------ HTML>

<div class="swiper-container horizontal"> 
     <div class="swiper-wrapper"> 
      <div class="swiper-slide"><div class="swiper-container vertical"> 
       <div class="swiper-wrapper vertical"> 
       <div class="swiper-slide vertical"> 
        Slide 1 
       </div> 
       <div class="swiper-slide vertical"> 
        Slide 1.1 
       </div> 
       <div class="swiper-slide vertical"> 
        Slide 1.2 
       </div> 
       <div class="swiper-slide vertical"> 
        Slide 1.3 
       </div> 
       </div> 
       <div class="swiper-pagination vertical"></div> 
      </div></div> 
      <div class="swiper-slide">Slide 2</div> 
      <div class="swiper-slide">Slide 3</div> 
      <div class="swiper-slide">Slide 4</div> 
      <div class="swiper-slide">Slide 5</div> 
      <div class="swiper-slide">Slide 6</div> 
      <div class="swiper-slide">Slide 7</div> 
      <div class="swiper-slide">Slide 8</div> 
      <div class="swiper-slide">Slide 9</div> 
      <div class="swiper-slide">Slide 10</div> 
     </div> 
     <!-- Add Pagination --> 
     <div class="swiper-pagination horizontal"></div> 
    </div> 

    <!-- Swiper JS --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script> 
    <script> 
    var swiper = new Swiper('.swiper-container.horizontal', { 
     pagination: '.swiper-pagination.horizontal', 
     direction: 'horizontal', 
     slidesPerView: 1, 
     paginationClickable: true, 
     spaceBetween: 30, 
     mousewheelControl: true 
    }); 
    </script> 
    <script> 
    var swiper = new Swiper('.swiper-container.vertical', { 
     pagination: '.swiper-pagination', 
     direction: 'vertical', 
     slidesPerView: 1, 
     paginationClickable: true, 
     spaceBetween: 30, 
     mousewheelControl: true 
    }); 
    </script> 

< ----- ---- HTML端----------->

< -------- CSS ----------->

html, body { 
     position: relative; 
     height: 100%; 
    } 
    body { 
     background: #eee; 
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
     font-size: 14px; 
     color:#000; 
     margin: 0; 
     padding: 0; 
    } 
    .swiper-container { 
     width: 100%; 
     height: 100%; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    .swiper-slide { 
     text-align: center; 
     font-size: 18px; 
     background: #fff; 
     /* Center slide text vertically */ 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-box-pack: center; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
     -webkit-box-align: center; 
     -ms-flex-align: center; 
     -webkit-align-items: center; 
     align-items: center; 
    } 

< --------- css end ---- --------->

https://jsfiddle.net/120ngmoh/