主页 / 问题 / 1542135
Accepted
The__Tip учусь
Asked:2023-09-23 13:44:55 +0800 CST2023-09-23 13:44:55 +0800 CST

滑动按钮已飞至布局的最顶部，我该如何解决此问题？

  • 772

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
.slider__container{
height: 500px;

}
<div class="slider__container">
  <div class="slider__box">

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</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>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

</div>


  </div>
</div>

这里应该有滑块按钮 布局的最顶部，滑块按钮飞走了

javascript

1 个回答

  1. Best Answer

    如果您查看Swiper 文档，您会注意到一切都以元素开始.swiper，然后.swipper-wrapper将幻灯片添加到其中.swiper-slide。

    重点是按钮的定位使用position: absolute;并且按钮“飞走”，因为 你的.swiper-container没有position: relative远程的规则.swiper。

    我建议您离开课程.swiper并添加您自己的课程.swiper-container作为第二课程：

    const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
    @import url(https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css);

.swiper.swiper-container {
  width: 600px;
  height: 300px;
}

.swiper.swiper-container .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</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>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

    • 1

相关问题