CSS conflict in react using swiper.js library

Question

I created two sliders using swiper.js in react. The css rules for both the sliders are different and had to target same css classes that library provided. When I integrate both the components in react, css conflict happens. How do I resolve this ?

eg: 1st component slider css rule

.swiper-container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 150px;
}

2nd component slider css rule

.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;
}

The 2nd component css rule will override the first component css rule which I dont want that happen Any way to solve this ?

GABY KARAM · Accepted Answer · 2020-10-31 07:05:11Z

6

what you can do is adding a container class for each slider and use that container class to prefix your css rules.

as an example:

// 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;
}

answered Oct 31, 2020 at 7:05

GABY KARAM

3691 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ronak patel Over a year ago

How do I achieve same with the buttons. The CSS is different for both the component's button

GABY KARAM Over a year ago

What do you mean? is the button inside the slider ? On either case even if the button wasn't inside the slider you can also wrap the button with a div container with a specific class and do the same as the swiper container

ronak patel Over a year ago

Arrow keys on left and side has different alignment.

ronak patel Over a year ago

How do I even target them ?

GABY KARAM Over a year ago

try to check the following code on sandbox codesandbox.io/s/…

|

GMKHussain · Accepted Answer · 2020-10-31 07:02:27Z

You don't need to use same class for multiple component.

Do like this to void conflicts.

.s1 for first swiper slider and .s2 for second one.

var s1 = new Swiper('.s1', {
    slidesPerView: 4,
    spaceBetween: 10,
    pagination: '.sp1',
    paginationClickable: true,
});
var s2 = new Swiper('.s2', {
    slidesPerView: 4,
    spaceBetween: 10,
    pagination: '.sp2',
    paginationClickable: true,
});

.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>

I am using react and their components so I cant add or access class directly

Collectives™ on Stack Overflow

CSS conflict in react using swiper.js library

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related