jquery - 带有 holder.js 的刷卡器

Question

在使用 holder.js 时 Swiper 的高度不对。这可能是因为 Swiper 在/同时在 holder.js 之前执行。holder.js 必须首先执行，以便 swiper 知道正确的图像尺寸。有简单的解决方案吗？

$(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: {

            }
          }
      });

});

Answer 1

在使用 Swiper 创建轮播之前，添加Holder.run(). 这将强制 Holder 在调用其内部“DOM 就绪”处理程序之前呈现占位符。