Swiper Slider puts all slides in one slide

Question

I set up Swiper Slider as per the documentation and every slide slides as if one.

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div> 


var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
    slidesPerView: 1,
});

I also tested it on CodePen with the same result, so I know it's not something in my project: https://codepen.io/DasRollo/pen/YzzMrgP

Can anyone replicate this?

Answer 1

In your codepen you forgot to include the css that the plugin also needs to function properly. Not entirely sure if that's what you meant you issue was, but if so, try the code below.

var mySwiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  slidesPerView: 1,
});

.swiper-slide {
  padding: 2em;
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<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>
  <!-- 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> 

Answer 2

I had the same problem. In my case I added:

import '../../../node_modules/swiper/css/swiper.min.css';

And it's working.

Answer 3

In my case problem was that I didnt add swiper-slide class for each slider item, so solutiom was just add swiper-slide class

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div> // add "swiper-slide" class!
        <div class="swiper-slide">Slide 2</div> // add "swiper-slide" class!
        <div class="swiper-slide">Slide 3</div> // add "swiper-slide" class!
    </div>
</div>

My swiper settings after npm install swiper

import Swiper, {Navigation} from 'swiper';
import 'swiper/swiper-bundle.css';
    
Swiper.use([Navigation]);

const swiper = new Swiper('.swiper-container', {
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        1440: {
            slidesPerView: 3
        },
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 1,
});

If you use webpack check css loaders

{
     test: /\.css$/,
     use: ['style-loader', 'css-loader'],
},

Answer 4

⚠️⚠️⚠️ Slides can missbehave, resulting into beeing on side 1, if you change their width. In my example i set the width to 150px. All slides were on side 1. There were 9x additional empty sides. I inspected the slides and saw their automatic set width was crossed. Uncrossing it fixed the problem.

Maybe you also set width on them.
Maybe you set a additonal class on the div element, which sets the width:

Answer 5

I had to set navigation despite I did not need it:

navigation: {
  prevEl: null,
  nextEl: null,
},