CODEWITHSUNDEEP
jquerycarouselswiper.jsholder.js
QJan84
QJan84

Reputation: 796

Swiper with holder.js

In the use of holder.js the height of Swiper's wrong. This is probably because that Swiper is executed before / simultaneously holder.js. holder.js must be performed first so swiper knows the correct image dimensions. Is there a simple solution?

$(document).ready(function () {

// =============================================
// CAROUSEL (Swiper)
// =============================================

        //  Hero Carousel
        // - - - - - - - - - - - - - - - - - - - - -

        var heroCarousel = new Swiper('.swiper-hero', {
          keyboardControl:true,
          autoplay: 3000,
          autoplayDisableOnInteraction: false,
          autoHeight: true,
          pagination: '.swiper-hero-pagination',
          loop: true,
          simulateTouch: false,
          paginationClickable: true,
          slidesPerView: 1,
          nextButton: ".swiper-hero-r",
          prevButton: ".swiper-hero-l",
            breakpoints: {
            544: {

            },
            992: {

            },
            1200: {

            }
          }
      });

});

Upvotes: 0

Views: 90

Answers (1)

imsky
imsky

Reputation: 3289

Before you create the carousel with Swiper, add Holder.run(). This will force Holder to render placeholders before its internal "DOM ready" handler is called.

Upvotes: 1

Related Questions