Question 45826 in CSS Question posted in
Some basic documentation can be found here.

pagination to move from left to right to left. (swiper slider) – CSS

in the swiper sliderin mousewheel demo, the pagination is right-justified. I want to show the pagination bar on the left.
here is the sample code. Can you help me?
https://codesandbox.io/p/sandbox/lbej0o?file=%2Findex.html

<div class="swiper-pagination"></div>

this is how i created a div and class. I assigned these css values to this class but the result did not change

.swiper-pagination {
   position: absolute;
   left: 10px;
   ball: 50%;
   transform: translateY(-50%);
}
Tags:

2

Answers


  1. 0

    You can set --swiper-pagination-left and --swiper-pagination-left for the element:

    .swiper-pagination {
  --swiper-pagination-right: auto;
  --swiper-pagination-left: 8px;
}

    Try it:

    new Swiper('.swiper', {
  direction: 'vertical',
  pagination: {
    el: '.swiper-pagination'
  },
});
    .swiper-pagination {
  --swiper-pagination-right: auto;
  --swiper-pagination-left: 8px;
}


/* Demo only */

body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
}

.swiper {
  height: 100%;
}

.swiper-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><div>Slide 1</div></div>
    <div class="swiper-slide"><div>Slide 2</div></div>
    <div class="swiper-slide"><div>Slide 3</div></div>
    <div class="swiper-slide"><div>Slide 4</div></div>
    <div class="swiper-slide"><div>Slide 5</div></div>
  </div>
  <div class="swiper-pagination"></div>
</div>
    Login or Signup to reply.
  2. 0

    Try adding this css code:

    .swiper-pagination-vertical.swiper-pagination-bullets, 
.swiper-vertical>.swiper-pagination-bullets {
   right: auto;
   left: 8px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search