Question

我想用 Swiper JS 制作一个图像滑块，我尝试按照入门指南进行操作，但导航箭头未显示。在我的 HTML 中，我有

<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="/assets/concert-square.jpg" alt="slideshow image"></div>
    <div class="swiper-slide"><img src="/assets/concert-horizontal.jpg" alt="slideshow image"></div>
    <div class="swiper-slide"><img src="/assets/concert-vertical.jpg" alt="slideshow image"></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>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

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

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
</script>

这会生成一个完美工作的图像滑块，唯一的问题是导航：它可以工作，如果我单击元素，它的行为正确，但我看不到元素本身。我被建议将类从“swiper-container”更改为其他内容，但在这种情况下，我也会丢失所有样式，并且我只会在页面中看到一系列图像，从而导致水平滚动。也许我可以自己设置元素的样式，但我想先看看默认样式。我做错了什么？

附言我将我的代码与 this demo 进行了比较，问题是添加箭头的 :after 元素存在但未在我的页面中设置样式，但我不知道为什么。在标题中，我正在导入 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

Swiper js未显示导航箭头

0 个答案: