CODEWITHSUNDEEP
javascripthtmlcssswiper.js
user15071395
user15071395

Reputation:

Why are three slides added instead of one when I add a slide to Swiper slider?

JS Fiddle: https://jsfiddle.net/mey9zgfr/7/

For some mysterious reason, when I add one slide in a slider, three slides are added. I've never encountered such a strange problem using Swiper.

Intitally I thought that this bug happens because of slidesPerView param is set to 4, but I only have 1 slide in my Swiper. So I tried to increase amount of slides up to 4, but that didn't work, it gave 12 slides in result. 

    let swiper = new Swiper("#albums_slider", {
        direction: "horizontal",
        spaceBetween: 30,
        slidesPerView: 4,
        loop: true,
        allowTouchMove: false,
        speed: 600,
        autoplay: {
            delay: 3000
        },
    
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
        }
    });
    #albums_slider {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 150px;
    }
    .swiper-slide {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        border: 1px solid #ccc;
        color: var(--third-color)!important;
        text-decoration: none!important;
    }
    .swiper-slide:hover {
        text-decoration: none!important;
    }
    .swiper-slide .title {
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        font-size: 22px;
    }
    .swiper-slide .description {
        width: 100%;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        font-size: 18px;
    }
    .swiper-slide .price {
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        font-size: 20px;
    }
    .swiper-slide img {
        width: 100%;
        height: auto;
    }
    .swiper-button-next, .swiper-button-prev {
        outline: none;
        color: #000!important;
    }
    <head>
      <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    </head>
    <div class="swiper-container" id="albums_slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="" class="image"><img src="https://paspahang.org/wp-content/uploads/2018/12/collect-the-incredible-funny-cat-memes-hit-man-of-funny-cat-memes-hit-man.gif" alt=""></a>
            <div class="title">Album1</div>
            <div class="description">Info</div>
            <div class="price">$$$</div>
        </div>
      </div>
    </div>

Any help would be highly appreciated
P.S. SO doesn't allow me to post the question due to that "it looks like your post is mostly code; please add some more details", since I don't have anything else to add, I'd place this here:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Upvotes: 1

Views: 2539

Answers (1)

Amihan co
Amihan co

Reputation: 1

it think you should use loopFillGroupWithBlank: true,centeredSlides: true, in your swiper options

loopFillGroupWithBlank: true,
centeredSlides: true,

@Coder4Fon

Upvotes: 0

Related Questions