iDangerous Swiper Paginierung auf der rechten Seite

Question

Ich versuche, die Pageination auf der rechten Seite wie auf dem Screenshot zu erhalten: Der Hinweis ist, dass der Slider nicht wie in der Demo vertikal gleiten sollte.

Dies ist mein Code so weit. Ich habe die Klasse swiper-Container-vertikal auf dem Behälter:

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

mein html:

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

aber die Paginierung ist immer noch auf der unterhalb der swiper links.

Vielleicht hilft dies ein wenig: https://jsfiddle.net/w9qypqfw/2/

Answer 1

diese Folgen. Vielleicht kann dir helfen. Auf 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

ich möchte ein swiper klauen horizontal und seine Paginierung ist auf der rechten Seite Seite vertikal. :)

• zuerst die swiper Kugeln machen vertikal ausrichten von:

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

• die Standardposition entfernen:

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

• einen gewissen Spielraum In den Kugeln:

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

Hier ist eine fiddle, die das gleiche demonstriert. Hoffe das hilft. Dies ist keine perfekte Lösung. Das ist gut für den Anfang. Und ich glaube nicht, dass swiper standardmäßig etwas hat, das deine Anforderungen erfüllt. Da dies nur eine Stiländerung ist, müssen Sie sich nicht darum kümmern, dass irgendetwas kaputt geht.

Hinweis: Das Ergebnis hängt möglicherweise davon ab, wie die Dateien geladen sind.