如何解决使用swiper.js库的CSS冲突
我在react中使用swiper.js创建了两个滑块。两个滑块的css规则是不同的,并且必须针对库提供的相同css类。当我将这两个组件集成到react中时,会发生CSS冲突。我该如何解决?
例如:第一个组件滑块CSS规则
.swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
第二个组件滑块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规则 有什么办法解决这个问题?
解决方法
您可以做的是为每个滑块添加一个容器类,并使用该容器类为您的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,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;
}
,
您不需要为多个组件使用相同的类。
执行此操作以消除冲突。
.s1 用于第一个滑动滑块, .s2 用于第二个滑动滑块。
var s1 = new Swiper('.s1',{
slidesPerView: 4,spaceBetween: 10,pagination: '.sp1',paginationClickable: true,});
var s2 = new Swiper('.s2',pagination: '.sp2',});
.s1 {
background: pink;
margin-bottom: 30px;
}
.s2 {
background: lime;
}
.swiper-slide {
border: 1px solid #115599;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<div class="swiper-container s1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination sp1"></div>
</div>
<!-- Swiper -->
<div class="swiper-container s2">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination sp2"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。