由于我为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:1
、updateOnImagesReady:1
、observer:1
和observeParents:1
。移除延迟载入
1条答案
按热度按时间lh80um4z1#
要防止第一张幻灯片上的div高度不正确,您可以尝试在滑动条配置中将autoHeight选项设置为false。这将防止滑动条尝试自动调整幻灯片的高度,这可能会导致您看到的问题。
或者,您可以尝试使用CSS手动设定投影片的高度。您可以在CSS档案中将特定高度套用至.swiper-slide类别。例如:
这会将所有幻灯片的高度设置为400像素。您可以根据需要调整此值以适合图像的大小。
希望这对你有帮助!