css 分页从左到右再到左移动,(滑动条)

ddrv8njm 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(160)

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

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

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

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

css

来源：https://stackoverflow.com/questions/75954955/pagination-to-move-from-left-to-right-to-left-swiper-slider

2条答案

按热度按时间

afdcj2ne1#

您可以为元素设置--swiper-pagination-left和--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>

赞(0）回复(0）举报 2023-04-08

1zmg4dgp2#

尝试添加以下css代码：

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

赞(0）回复(0）举报 2023-04-08

我来回答

css 分页从左到右再到左移动,(滑动条)

2条答案

相关问题

热门标签

最新问答