Question

26

Swiper Slider puts all slides in one slide

rated 0 times [ 27] [ 1] / answers: 1 / hits: 9168 / 5 Years ago, fri, november 22, 2019, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nathanaelzechariahl

Add To Favorites

Follow

Total Points: 745

Total Questions: 86

Total Answers: 103

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

nathanaelzechariahl questions

1 Using useState to store state for an array of objects

Sat, Feb 27, 21, 00:00, 3 Years ago

1 npm related tasks are throwing errors during installations

Thu, Aug 20, 20, 00:00, 4 Years ago

1 RegEx to remove unwanted character patterns

Thu, May 14, 20, 00:00, 4 Years ago

1 react native modal always visible

Tue, Jul 30, 19, 00:00, 5 Years ago

1 How to fetch the value in object array in javascript

Wed, May 15, 19, 00:00, 5 Years ago

View All

answered 5 Years ago mckenna · Accepted Answer

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>