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.

Solution 1:

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

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

And it's working.

Solution 2:

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

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

My swiper settings after npm install swiper

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

const swiper = newSwiper('.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'],
},

Solution 3:

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.

Baca Juga

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

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script><linkhref="https://unpkg.com/swiper/css/swiper.min.css"rel="stylesheet"/><divclass="swiper-container"><!-- Additional required wrapper --><divclass="swiper-wrapper"><!-- Slides --><divclass="swiper-slide">Slide 1</div><divclass="swiper-slide">Slide 2</div><divclass="swiper-slide">Slide 3</div></div><!-- If we need pagination --><divclass="swiper-pagination"></div><!-- If we need navigation buttons --><divclass="swiper-button-prev"></div><divclass="swiper-button-next"></div><!-- If we need scrollbar --><divclass="swiper-scrollbar"></div></div>

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

enter image description here

Solution 5:

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

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

JavaScript Exercises