iDangerous Swiper Pagination on the right

Question

i try to get the Pageination on the right like on the Screenshot: The clue is that the Slider should not be sliding vertical like in the Demo.

This is my code so far. I put the class swiper-container-vertical on the container:

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

my html:

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

but the pagination is still on the left below the swiper.

Perhaps this helps a bit: https://jsfiddle.net/w9qypqfw/2/

Answer 1

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

• First make the swiper bullets to align vertically by:

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

• Remove the default positioning:

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

• Add some margin to the bullets:

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

Here is a fiddle demonstrating the same. Hope this helps. This is not a perfect solution. This is good for a start. And I don't think swiper has something that meets your requirement by default. As this is just a style change, you need not worry about anything breaking.

Note: Result might vary on your project based on how the files are loaded.

Answer 2

Follow this. Maybe can help you. On 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/