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

我想要一个水平滑动的 Swiper，它的分页在右边 侧面垂直。 :)

• 首先使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 默认情况下没有满足您要求的东西。由于这只是样式更改，因此您不必担心会损坏任何东西。

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

Answer 2

按照这个。也许可以帮助你。 在 FiddleJs 上：

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