CODEWITHSUNDEEP
javascriptjqueryswiper.js
kawnah
kawnah

Reputation: 3404

swiper slider - swiping as one slide, but CSS is included

How come swiper slider is sliding all my divs as one? Did the library change?

Below is my example:

var swiper = new Swiper('.swiper-container', {
    autoplay:false,
  direction: "horizontal",
    loop:false,
    pagination: {
        el: '.product-image-thumbs .swiper-pagination',
        clickable: true,
        bulletActiveClass: 'active'
    }
});
.swiper-slide {
  background-color: green;
  width: 300px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
   <div class="swiper-pagination"></div>
</div>

you can see that all the slides are in one slide?

as per these answers

Swiper Slider puts all slides in one slide

Swiper slider does not swipe slides on mobile devices

They all say to include the CSS file, but you can see that my CSS file is included, and the linked answers are now exhibiting the same behavior as mine.

Did swiper change?

Upvotes: 0

Views: 3626

Answers (1)

turivishal
turivishal

Reputation: 36094

Yes might be links are outdated, refer swiperjs for latest version and try this links:

// CSS
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
// JS
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

There are few quick fixes:

  • Pagination: Property el will allow comma separated classes, that you have separated with spaces
  • BulletActiveClass: Currently there are no style on active class that you have specified, so commented for now
  • Script Location: Always try to use scripts at the end of body tag, as i have add in below example
  • CSS: I have added css from swiper example, because here without css slider was corrupted

Your working example with above fixes:

var swiper = new Swiper('.swiper-container', {
    autoplay:false,
    direction: "horizontal",
    loop:false,
    pagination: {
        el: '.product-image-thumbs, .swiper-pagination',
        clickable: true,
        // bulletActiveClass: 'active'
    }
});
html,
body {
    position: relative;
    height: 100%;
}
body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper-container">
    <div class="product-image-thumbs"></div>
    <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 class="swiper-slide">Slide 4</div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Upvotes: 1

Related Questions