React 在同一个组件使用多个 swiper 踩坑

原创

于 2020-05-01 01:52:52 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #reactjs

在 React 应用中实现多个 swiper 轮播图时遇到问题，两个轮播图互相影响。解决办法是为不同的 swiper 组件设置独特的 class 名，避免冲突。

当我写完两个 swiper 轮播图组件之后,在引入的时候出现了问题
发现两个轮播图会互相影响 ,
解决方案如下

第一个 swiper 组件 ----------
  render() {
   
    
    return (
      <div className="find-bannerBox">
        <div className={
   
   "swiper-container"}>  // <--- 这里我使用原生的类名
          <div className={
   
   "swiper-wrapper"}>
            <div className={
   
   "swiper-slide"}>Slide 1</div>
            <div className={
   
   "swiper-slide"}>Slide 2</div>
            <div className={
   
   "swiper-slide"}>Slide 3</div>
            <div className={
   
   "swiper-slide"}>Slide 4</div&

最低0.47元/天解锁文章