css swiperjs为第一张图片设置了错误的高度

6l7fqoea  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(186)

由于我为swiperjs添加了autoheight,所以第一张图片的div高度是false,当我来回滑动时,图片得到了正确的高度。我可以添加什么css或js来防止这种情况呢?前缀高度看起来像是方向箭头的高度。
我js:

var W = {
        init: !0,
        direction: "horizontal",
        touchEventsTarget: "wrapper",
        observer: 1,
        autoHeight: 1,
        observeParents: 1,
        initialSlide: 0,
        speed: 300,
        cssMode: !1,
        updateOnWindowResize: !0,
        resizeObserver: !0,
        nested: !1,
        createElements: !1,
        enabled: !0,
        focusableElements: "input, select, option, textarea, button, video, label",
        width: null,
        height: null,
        preventInteractionOnTransition: !1,
        userAgent: null,
        url: null,
        edgeSwipeDetection: !1,
        edgeSwipeThreshold: 20,
        setWrapperSize: !1,
        virtualTranslate: !1,
        effect: "slide",
        breakpoints: void 0,
        breakpointsBase: "window",
        spaceBetween: 0,
        slidesPerView: 1,
        slidesPerGroup: 1,
        slidesPerGroupSkip: 0,
        slidesPerGroupAuto: !1,
        centeredSlides: !1,
        centeredSlidesBounds: !1,
        slidesOffsetBefore: 0,
        slidesOffsetAfter: 0,
        normalizeSlideIndex: !0,
        centerInsufficientSlides: !1,
        watchOverflow: !0,
        roundLengths: !1,
        touchRatio: 1,
        touchAngle: 45,
        simulateTouch: !0,
        shortSwipes: !0,
        longSwipes: !0,
        longSwipesRatio: 0.5,
        longSwipesMs: 300,
        followFinger: !0,
        allowTouchMove: !0,
        threshold: 0,
        touchMoveStopPropagation: !1,
        touchStartPreventDefault: !0,
        touchStartForcePreventDefault: !1,
        touchReleaseOnEdges: !1,
        uniqueNavElements: !0,
        resistance: !0,
        resistanceRatio: 0.85,
        watchSlidesProgress: !1,
        grabCursor: !1,
        preventClicks: !0,
        preventClicksPropagation: !0,
        slideToClickedSlide: !1,
        preloadImages: 1,
        updateOnImagesReady: 1,
        loop: !1,
        loopAdditionalSlides: 0,
        loopedSlides: null,
        loopFillGroupWithBlank: !1,
        loopPreventsSlide: !0,
        rewind: !1,
        allowSlidePrev: !0,
        allowSlideNext: !0,
        swipeHandler: null,
        noSwiping: !0,
        noSwipingClass: "swiper-no-swiping",
        noSwipingSelector: null,
        passiveListeners: !0,
        maxBackfaceHiddenSlides: 10,
        containerModifierClass: "swiper-",
        slideClass: "swiper-slide",
        slideBlankClass: "swiper-slide-invisible-blank",
        slideActiveClass: "swiper-slide-active",
        slideDuplicateActiveClass: "swiper-slide-duplicate-active",
        slideVisibleClass: "swiper-slide-visible",
        slideDuplicateClass: "swiper-slide-duplicate",
        slideNextClass: "swiper-slide-next",
        slideDuplicateNextClass: "swiper-slide-duplicate-next",
        slidePrevClass: "swiper-slide-prev",
        slideDuplicatePrevClass: "swiper-slide-duplicate-prev",
        wrapperClass: "swiper-wrapper",
        runCallbacksOnInit: !0,
        _emitClasses: !1,
    };

我已经尝试添加以下内容:preloadImages:1updateOnImagesReady:1observer:1observeParents:1。移除延迟载入

lh80um4z

lh80um4z1#

要防止第一张幻灯片上的div高度不正确,您可以尝试在滑动条配置中将autoHeight选项设置为false。这将防止滑动条尝试自动调整幻灯片的高度,这可能会导致您看到的问题。

var W = {
    //...
    autoHeight: false,
    //...
};

或者,您可以尝试使用CSS手动设定投影片的高度。您可以在CSS档案中将特定高度套用至.swiper-slide类别。例如:

.swiper-slide {
  height: 400px;
}

这会将所有幻灯片的高度设置为400像素。您可以根据需要调整此值以适合图像的大小。
希望这对你有帮助!

相关问题