iDangerous Swiper分頁在右邊

Question

我嘗試在屏幕截圖上獲得右邊的頁面設置： 線索是Slider不應該像Demo中那樣垂直滑動。

這是我的代碼到目前爲止。我把類刷卡容器垂直容器上：

.swiper-container-horizontal { 
    .swiper-pagination-bullets { 
    right: 10px !important; 
    bottom: 5px; 
    left: auto; 
    .swiper-pagination-bullet { 
     margin: 5px 0; 
     display: block; 
    } 
    } 
} 
.swiper-container-vertical { 
    .make-xs-column(12); 
    //margin-top: 100px; 
    .swiper-wrapper { 
    flex-direction: row !important; 
    padding-left: 10px; 
    } 
    .swiper-pagination { 
    width: 8px; 
    } 
} 

我的html：

<div class="swiper-container swiper-bestseller swiper-container-vertical"> 
    <div class="swiper-wrapper"> 
<?php foreach ($bestseller as $product): ?> 
          <div class="swiper-slide"> 

但分頁仍然是左側的刷卡下方。

這或許有點幫助： https://jsfiddle.net/w9qypqfw/2/

Answer 1

關注這個。也許可以幫助你。 在FiddleJs：

< ------------ 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> 

< --------- -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; 
    } 

https://jsfiddle.net/120ngmoh/

Answer 2

我想組隊，探索刷卡水平和分頁在右側 側垂直。 :)

• 首先使swiper子彈由垂直對齊：

  .swiper-pagination-bullet { 
      display:block; 
  } 
  

• 刪除默認定位：

  .swiper-container-horizontal>.swiper-pagination-bullets { 
      width: initial; 
      top: 34%; 
      right: 0; 
      bottom: inherit; 
      left: inherit; 
  } 
  

• 添加一些保證金子彈：

  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { 
      margin: 5px; 
  } 
  

這是一個​​演示相同。希望這可以幫助。這不是一個完美的解決方案。這是一個很好的開始。我不認爲swiper默認情況下滿足您的要求。由於這只是一種風格變化，所以你不必擔心任何事情的中斷。

注意：根據文件加載方式的不同，結果可能因您的項目而異。