CODEWITHSUNDEEP
htmlswiper.js
Essay97
Essay97

Reputation: 874

Swiper js not showing navigation arrows

I want to do an image slider with Swiper JS, I tried to follow the getting started but the arrows for navigation are not showing. Inside my HTML I have

<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>

this generates a perfectly working image slider, the only problem is navigation: it works, if I click the element it behaves correctly, but I can't see the element itself. I was advised to change the class from "swiper-container" to something else, but in that case I also lose all the styling and I just see a sequence of images in my page, causing horizontal scrolling. Probably I can just style the elements myself, but I'd like to see the default styling before. What am I doing wrong?

P.S. I compared my code with this demo and the problem is that the :after element that adds the arrow is present but not styled in my page, but I don't know why. In the header I'm importing <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

Upvotes: 5

Views: 7922

Answers (1)

cfx
cfx

Reputation: 3450

One solution is to add this CSS for the arrows:

.swiper-button-next, .swiper-button-prev {
  text-rendering: auto;
}

I ran into the same issue and the solution is in a collapsed comment in the question so just thought I'd make it a bit more visible.

Upvotes: 4

Related Questions