Question

我尝试在屏幕截图右侧获取Pageination：线索是滑块不应像演示一样垂直滑动。

到目前为止，这是我的代码。我把类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：

＆LT; ------------ ---------- HTML＆GT;

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

＆LT; ---------- CSS --------＆GT;

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/

iDangerous Swiper Pagination在右边

2 个答案: