Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Swiper slider not loading initially when Slides per view is more than 1

I’m using the swiper slider in the my website.

When I have slides per view more then 1 for example, 4 then when I load page 1 slide showing then after sometime it adjust to 5 slides in swiper slider.

https://swiperjs.com/swiper-api

<!-- Slider main container -->
<div class="swiper">
  <!-- 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>

var slider = new Swiper(".swiper-container", {
                "slidesPerView":"4",
                "slidesToScroll":1,
                "spaceBetween":15,
                "freeMode":false,
                "loop":true,
                "lazy":true,
                "preloadImages":false,
                "swiperElementNodeName": 'swiper-container',
                "autoplay": {
                    "delay": 2500
                },
                "navigation":{
                    "nextEl":".swiper-button-prev",
                    "prevEl":".swiper-button-next"
                },
                "breakpoints":{
                    "1200":{
                        "slidesPerView": 4
                    },
                    "767":{
                        "slidesPerView":2.5,
                        "freeMode":true,
                        "loop":true
                    },
                    "480":{
                        "slidesPerView":1.5
                    }
                }
            });

When page render slides width should calculate and 4 slides should display from initial page load.

Tags:

2

Answers


  1. 0

    slidePerView must be a number or ‘auto’. Just change its value from string "4" to number 4. It should work now.

    Login or Signup to reply.
  2. 0

    I don’t fully understand your problem… Mainly because you didn’t include the CSS. Most of Swiper’s rendering problems are CSS related. Especially when we are talking about, for example, displaying the number of slides.
    I understood your problem this way: even though you set "slidesPerView":"4", Swiper still renders one slide. So, even though there is a syntax error because the value is a string, changing it to a number won’t change anything because you are targeting the wrong selector. By the way, the one you’re targeting doesn’t exist in your HTML at all.
    Your navigation buttons are also set up backwards.
    Try this approach:

    var slider = new Swiper(".swiper", {
                "slidesPerView":4,
                "slidesToScroll":1,
                "spaceBetween":15,
                "freeMode":false,
                "loop":true,
                "lazy":true,
                "preloadImages":false,
                //"swiperElementNodeName": 'swiper-container',(?)
                "autoplay": {
                    "delay": 2500
                },
                "navigation":{
                    "nextEl":".swiper-button-prev", // ↓
                    "prevEl":".swiper-button-next"  // ↑
                },
                "breakpoints":{
                    "1200":{
                        "slidesPerView": 4
                    },
                    "767":{
                        "slidesPerView":2.5,
                        "freeMode":true,
                        "loop":true
                    },
                    "480":{
                        "slidesPerView":1.5
                    }
                }
            });
    .swiper {
            width: 100%;
            height: 300px;
        }
.swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #eee;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
.swiper-button-next, .swiper-button-prev {
            color: #000;
        }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<div class="swiper">
  <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>
    <!-- Add some slides, will be better visible-->
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    ...
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search