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默认情况下满足您的要求。由于这只是一种风格变化，所以你不必担心任何事情的中断。

注意：根据文件加载方式的不同，结果可能因您的项目而异。