next.js 当页面挂载时，滑动js“autoheight“不适用于第一个幻灯片高度

mwecs4sa 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(127)

伙计们，我在React堆里遇到了一个问题，我不知道怎么解决。我在stackoverflow中搜索了很多，但没有找到任何有用的东西。
我有一个fullWidth Image滑块，我将swiper autoHeight属性设置为true。因为图像的高度不同问题出在组件安装滑杆高度为0时。我只能看到分页按钮。
当我滑到下一个，然后自动高度工程罚款。在第一次渲染时，它不起作用。
有办法解决吗？

<Swiper
      onSwiper={handleSetSwiper}
      autoHeight
      breakpoints={{
          0: {
            slidesPerView: 1,
            slidesPerGroup: 1,
          },
          600: {
            slidesPerView: 1,
            slidesPerGroup: 1,
          },
          978: {
            slidesPerView: cardsInARow,
            slidesPerGroup: cardsInARow,
            spaceBetween: 15,
          },
        }
      }
      pagination={{
        clickable: true,
      }}
      style={{
        paddingBottom: cardsInARow === 1 ? '2.5rem' : '4.5rem',
        margin: 0,
      }}
    >
      {slides.map((slide) => (
        <SwiperSlide key={slide.id}>
          <ImageCard content={slide.data} />
        </SwiperSlide>
      ))}
    </Swiper>

P.S：将observer和observerParents属性设置为true并没有解决我的问题

next.js

来源：https://stackoverflow.com/questions/76078184/swiper-js-autoheight-not-resizing-for-first-slide-height-when-page-mount

1条答案

按热度按时间

niknxzdl1#

将loading="lazy"添加到图像中并将Swiper Package 在

document.addEventListener("DOMContentLoaded", function () {
  const swiper = new Swiper('.swiper', {
    speed: 400,
    spaceBetween: 100,
  });
});

https://swiperjs.com/swiper-api#lazy-loading

赞(0）回复(0）举报 2023-10-18

我来回答

next.js 当页面挂载时，滑动js“autoheight“不适用于第一个幻灯片高度

1条答案

相关问题

热门标签

最新问答