Swiper js not automatically resizing the swiper-container and swiper-slide class

Question

I have a swiper that contains mdbootstrap cards that are dynamically created and added to the swiper carousel. Instead of swiper to adjust to the card height, the swiper classes defaults to the max height of the section which is 1333px. The cards are on average around 400px. Whats even more frustrating is that I have 3 other swiper carousels on a separate file working perfectly. I tried using the autoHeight parameter and setting it to true, but that didn't work. I just cuts off half the cards

Here is the code for the working instance

<section class="swiper-section ">
     <div class="netflix">
         <!-- Slider main container -->
         <div class="container">
             <h3 class="header-container"><span>Trending Movies</span></h3>
             <div class="swiper-container">
                  <!-- Additional required wrapper -->
                  <div class="swiper-wrapper trending_movies">

                         <!-- dynamic cards go here -->
                         <div class="swiper-slide">
                            <div class="card">
                                <div class="icon-button">
                                    <ion-icon name="ellipsis-horizontal-circle-sharp" class="ion-icon" data-movie="${el.title}"></ion-icon>
                                </div>
                                <a href="${'/client/views/movies.html'}" data-src="${el.id}" >
                                    <img class="img-size" src="${poster_image}" alt="">
                                </a>
                                <div class="card-body">
                                    <h6 class="card-title"> ${el.title}</h6>
                                    <p>${el.release_date}</p>
                                </div>
                            </div>
                        </div>
                   </div>
                       
                   <div class="swiper-button-prev"></div>
                   <div class="swiper-button-next"></div>

              </div>
         </div>

 </section>

<script>
        var mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 6,
            spaceBetween: 15,
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            observer: true,
            observerParents: true,

           
            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // And if we need scrollbar

        })

    </script>

Here is the code of the instance that does not work

<section class="swiper-section">
            <div class="netflix">
                <div class="container">
                    <h3 class="header-container"><span>Cast</span></h3>
                    <div class="swiper-container">
                        <div class="swiper-wrapper cast_carousel">

                          <!-- dynamic cards go here -->
                          <div class="swiper-slide">
                        <div class="card">
                            <a href="${'/client/views/movies.html'}" data-src="${el.id}">
                                <img class="img-size" src="${picture}" alt="">
                            </a>
                            <div class="card-body">
                                <h6 class="card-title"> ${el.character}</h6>
                                <p>${el.name}</p>
                            </div>
                        </div>
                    </div>
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </section>
        <section>

 <script>
        var mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 6,
            spaceBetween: 15,
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            observer: true,
            observerParents: true,
            autoHeight: true,

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        })

    </script>

Here is what the working version looks like.

Here is what i'm getting which is not my desired outcome

And here is what I get when I use autoHeight: true

I'm honestly regretting using swiperjs. Its too unpredictable. Basically just tolerating it now because im pretty deep into the project. Is there any other carousel frameworks similar to swiper that is easier to work with?

So as crazy as this sounds and after hours trying to figure this out, I finally figured it out. I went back and check my html file and noticed that at the beginning i was missing the <!Doctype html> tag. I added it in and that solved the problem. What a dumb mistake, but it seems like swiper gets messed up if you dont include it — championq45

championq45 championq45 · Accepted Answer · 2020-06-28T17:59:38

So as crazy as this sounds and after hours trying to figure this out, I finally figured it out. I went back and check my html file and noticed that at the beginning i was missing the <!Doctype html> tag. I added it in and that solved the problem.

Swiper js not automatically resizing the swiper-container and swiper-slide class

1 Answers