Question

我正在尝试在网页上使用“滑动”滑块。我在那边有侧边栏，但是当我以屏幕分辨率1680x1050显示页面时（侧边栏和网页都可见），滑动器图像的大小没有正确调整-图像被切断。但是，当我隐藏侧边栏时，整个幻灯片会正确显示。

此处，供参考的演示：http://demo.empresario.sk/

有一个带有“滑动”滑块的部分，第二个带有图像和文本的部分，其中的大小调整效果很好-正是我想要通过滑动实现的。

我尝试了main.css文件中的几个设置，但是没有运气。有人可以帮我解决这个问题吗？非常感谢！

Answer 1

我不知道我是否理解，但是唯一能看到裁切图像的方法是在地址中输入http://demo.empresario.sk/

来打开网站。

但是当我刷新页面时，图像不会被剪切掉。我认为它与您的ready/load events一样，是初始化Swiper的方式。我们没有您的JavaScript，所以我们不知道那里发生了什么...

我发现了更多... 当我点击地址时，似乎它会在打开菜单之前初始化Swiper，这就是Swiper使用100％窗口宽度的原因。

另一种方法是，当我单击“刷新”时，由于使用window.width - menu.width而没有剪切图像，但是当我单击菜单时，滑块会显示下一张幻灯片的一部分。相反，打开菜单后，Swiper被初始化。

我想解决的问题是，每次打开/关闭菜单时都必须重新初始化Swiper ...就像您在调整窗口大小时所做的那样？还是在调整窗口大小时Swiper实际上正在为您执行此操作？

更新

我将尝试将初始化移至您的javascript文件，并且每当调整窗口大小或关闭或打开菜单时，我都会致电mySwiper.updateSize()。也许会成功的

更新2

在和 mySwiper.update()确实欺骗了mySwiper.updateSize()

Answer 2

是同样的问题。并使用React Hooks找到答案。希望能帮上忙。

导入刷卡器

import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";

使用useEffect初始化swiper实例

useEffect(() => {
    swiper = new SwiperCore(".swiper-container", {
      spaceBetween: 0,
      slidesPerView: 1,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      updateOnWindowResize: true,
      loop: true,
      speed: 1200,
      pagination: {
        clickable: true,
        el: ".swiper-pagination",
      },
      autoplay: {
        delay: 4500,
        disableOnInteraction: false,
      },
    });
  }, []);

还有一个useEffect。谁观察侧边栏显示。 showLeftSideBar-布尔参数，根据状态而改变

useEffect(() => {
    if (swiper !== null) {
      swiper.update();
    }
  }, [showLeftSideBar]);

带有实质性用户界面的组件代码

<Box className={"swiper-container"}>
  <Box className={"swiper-wrapper"}>
      <SwiperSlide className={"swiper-slide"}>
        <Box>1</Box>
      </SwiperSlide>
      <SwiperSlide className={"swiper-slide"}>
        <Box>2</Box>
      </SwiperSlide>
      <SwiperSlide className={"swiper-slide"}>
        <Box>3</Box>
      </SwiperSlide>
  </Box>
  <Box className={"swiper-button-next"}>
    <ChevronRightIcon />
  </Box>

  <Box className={"swiper-button-prev"}>
    <ChevronLeftIcon />
  </Box>

  <Box className={"swiper-pagination"}></Box>
</Box>

这可以帮助解决此问题

侧边栏可见时，滑动器无法正确调整图像大小

2 个答案: