html - 右侧的 iDangerous Swiper 分页

Question

我尝试像屏幕截图一样在右侧获取分页:线索是 Slider 不应该像 Demo 中那样垂直滑动。

到目前为止，这是我的代码。我将类 swiper-container-vertical 放在容器上:

.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

I want a Swiper swiping horizontal and its pagination is on the right side verticaly. :)

• 首先使 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;  
  }  
  

这是一个fiddle证明相同。希望这可以帮助。这不是一个完美的解决方案。这是一个很好的开始。而且我认为 swiper 默认情况下没有满足您要求的东西。由于这只是样式更改，您不必担心会出现任何问题。

注意:结果可能因您的元素而异，具体取决于文件的加载方式。