如何在 React jsx 文件中正确使用 swiperjs 断点？

发布于 2025-01-09 20:40:44 字数 1100 浏览 3 评论 0原文

我使用 swiperjs 依赖项来创建一个令人惊叹的滑块。但是，我在使用 API 控制器之一时遇到了错误，即断点。我需要这个控制器来定制显示。但是，当我应用这个时，我收到了这样的错误：v 错误屏幕截图

这是我的代码：

<Swiper
    centeredSlides={true}
    grabCursor={true}
    pagination={{
        dynamicBullets: true,
    }}
    breakpoints: {
    // when window width is <= 1024px
        1024: {
            slidesPerView: 4,
            spaceBetweenSlides: 150
        },
        // when window width is <= 768px
        768: {
            slidesPerView: 3,
            spaceBetweenSlides: 200
        }
    }
    modules={[Pagination]}
    className="mySwiper"
>
    {events.map((event, idx) => {
      return (
        <SwiperSlide>
          <CardEvent
            image={event.img}
            info={event.info}
            title={event.name}
            icon={event.ico}
            color="bg-white"
          />
        </SwiperSlide>
      );
    })}
</Swiper>

有人可以帮助我如何使用断点吗？

原文

Iam using swiperjs dependencies to create an amazing slider. But, I got an error while using one of API controller, which is breakpoints. I need this controller for customization the display. But, when I applied this, I got an error like this :v
error screenshot

Here is my code :

<Swiper
    centeredSlides={true}
    grabCursor={true}
    pagination={{
        dynamicBullets: true,
    }}
    breakpoints: {
    // when window width is <= 1024px
        1024: {
            slidesPerView: 4,
            spaceBetweenSlides: 150
        },
        // when window width is <= 768px
        768: {
            slidesPerView: 3,
            spaceBetweenSlides: 200
        }
    }
    modules={[Pagination]}
    className="mySwiper"
>
    {events.map((event, idx) => {
      return (
        <SwiperSlide>
          <CardEvent
            image={event.img}
            info={event.info}
            title={event.name}
            icon={event.ico}
            color="bg-white"
          />
        </SwiperSlide>
      );
    })}
</Swiper>

Anybody can help me how to use breakpoints?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧话新听 2025-01-16 20:40:45

breakPoints 语法错误。这就是您看到该错误的原因。尝试下面的语法。参考沙箱 url

breakpoints = {{
        1024: {
            slidesPerView: 4,
            spaceBetweenSlides: 150
        },
        768: {
            slidesPerView: 3,
            spaceBetweenSlides: 200
        }
    }}

breakPoints syntax is wrong. that's why you see that error. Try the below syntax. Refernce sandbox url

breakpoints = {{
        1024: {
            slidesPerView: 4,
            spaceBetweenSlides: 150
        },
        768: {
            slidesPerView: 3,
            spaceBetweenSlides: 200
        }
    }}

回复收藏 0 原文

~没有更多了~