分页从左到右再到左.(偷窃者滑块)

Question

在鼠标滚轮滑动器演示中，分页是右对齐的。我想在左边显示分页栏。下面是示例代码。你能帮我吗?https://codesandbox.io/p/sandbox/lbej0o?file=%2Findex.html

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

这是我如何创建一个div和类。我将这些css值赋给这个类，但结果没有改变

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

Answer 1

尝试添加以下css代码:

.swiper-pagination-vertical.swiper-pagination-bullets, 
.swiper-vertical>.swiper-pagination-bullets {
right: auto;
left: 8px;
}

Answer 2

可以为元素设置--swiper-pagination-right和--swiper-pagination-left:

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

试一试:

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>