- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 react 中使用 swiper.js 创建了两个 slider 。两个 slider 的 css 规则是不同的,并且必须针对库提供的相同 css 类。当我将这两个组件都集成到 react 中时,就会发生 css 冲突。我该如何解决这个问题?
例如:第一个组件 slider css 规则
.swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
第二个组件 slider CSS规则
.swiper-container {
max-width: 500px;
border-radius: 15px;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 16px;
margin-left: 0;
margin-right: 0;
}
第二个组件 css 规则将覆盖我不希望发生的第一个组件 css 规则
最佳答案
您可以做的是为每个 slider 添加一个容器类,并使用该容器类为您的 CSS 规则添加前缀。
举个例子:
// import Swiper core and required components
import SwiperCore, {A11y, Navigation, Pagination, Scrollbar} from 'swiper';
import {Swiper, SwiperSlide} from 'swiper/react';
// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
export default () => {
return (
<>
<div className="container-1">
<Swiper
spaceBetween={50}
slidesPerView={3}
navigation
pagination={{clickable: true}}
scrollbar={{draggable: true}}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
</div>
<div className="container-2">
<Swiper
spaceBetween={50}
slidesPerView={3}
navigation
pagination={{clickable: true}}
scrollbar={{draggable: true}}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
</div>
</>
);
};
CSS
.container-1 .swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
.container-2 .swiper-container {
max-width: 500px;
border-radius: 15px;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 16px;
margin-left: 0;
margin-right: 0;
}
关于javascript - 使用 swiper.js 库使用react的 CSS 冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64619066/
我正在尝试使用 swiper ( https://swiperjs.com/angular ) 以 Angular 创建旋转木马。 我收到此错误: 错误:node_modules/swiper/ang
我正在为 swiper 使用这种配置: var swiper = new Swiper('.swiper-container', { spaceBetween: 30, slidesPerVi
这几天我一直致力于在我的应用程序中设置刷卡器,但我仍然没有运气,从这里到 Github 问题或网络上的其他地方都没有找到任何工作示例。 我无法通过针对此问题的任何建议解决方案在垂直模式下设置滑动器的动
我正在使用 iDangerous Swiper 插件。我需要定期更改 ajax 方法中的所有幻灯片。执行相同操作的最佳方法是什么。 最佳答案 在 Swiper 上调用 destroy() 删除/用新幻
所以我在 friend 的推荐下使用 Swiper.js 来创建一个自动滚动的 slider 。但我无法弄清楚如何使幻灯片之间的过渡平滑。目前,当我更改自动播放 ms 时,它只会更改更改幻灯片所需的时
我想将分页元素符号从底部移动到查看区域的顶部。 目前,分页元素符号显示在所有包装器或 JavaScript 附加的幻灯片内容下方。我希望它出现在上面。 更多信息:https:/
我正在尝试为每个分页项目符号添加一个新的 element class,并且我想保留 swiper 的默认样式。所以我做的是 pagination={ clickable: true,
我有一个带有多个 slider 的简单页面。每个 slider 由三个 slider 组成;左、中、右。如果另一个 slider 发生变化,我想将所有 slider 重置到中间。可以将其想象为一个用户
我使用的是基本的刷卡器,没有任何选项。然后我的网站正文中有一个“mousemove”的监听器。我这样做是为了构建鼠标跟随器效果。这效果很好,但是当我开始拖动幻灯片时,似乎该事件将不再到达,并且我的自定
我使用的是基本的刷卡器,没有任何选项。然后我的网站正文中有一个“mousemove”的监听器。我这样做是为了构建鼠标跟随器效果。这效果很好,但是当我开始拖动幻灯片时,似乎该事件将不再到达,并且我的自定
我将 Swiper 设置为每列显示 2 行,但是当我这样做时,Swiper-Slide-Active 类未正确设置,即此类未应用于显示在中心的幻灯片 (2)滑动器的。 知道我在这里做错了什么吗?下面滑
我最近尝试在我的网站上设置“idangero.us Swiper”功能。不幸的是,它似乎不起作用。我对 JS 的经验非常有限,所以我完全不知道如何解决这个问题。 我收到的错误是Uncaught Ref
我正在使用 swiper 来显示不同的产品类别,在带有 swiper-slide 类的 div 中,以动态方式调用类别的产品。但并非所有产品都显示出来。即使溢出或高度为 100%,它也不会显示所有产品
我正在努力改变封面流程中的刷卡器幻灯片轮播。 这就是我现在得到的。 var mySwiper = new Swiper('.swiper-container-aboutus', { // Opti
我在网站上使用滑动 slider ,并且希望在只有一张幻灯片的情况下禁用它。 目前只有一张幻灯片会显示分页,您可以单击或滑动。理想情况下,如果只有一张幻灯片,则不应有任何交互。 我当前的js是:
如何删除 react-native-swiper-flatlist 最后一个 child 滑动分页点?我尝试了一些方法,但似乎不可能。请帮我。
我正在使用 Andre Ruffert 的 rangeslider.js在 iDangerous 之上 swiper.js但每次滑动我初始化的 Rangeslider 时,它也会刺激 Swiper 的
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13),但它给了我所有类型的错误。。首先,我试着像往常一样导入,从他们网站上列出的一个演示中复制过来,它显示得很好,但导航按钮不
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13),但它给了我所有类型的错误。。首先,我试着像往常一样导入,从他们网站上列出的一个演示中复制过来,它显示得很好,但导航按钮不
我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13),但它给了我所有类型的错误。。首先,我试着像往常一样导入,从他们网站上列出的一个演示中复制过来,它显示得很好,但导航按钮不
我是一名优秀的程序员,十分优秀!