Swiper styles being applied globally to other carousels - Swiper Element (WebComponent) - React

[marcosriani]

Hi there,

I'm currently working on a real estate agency website and using Swiper JS as the main carousel. Since the website will have multiple carousels with different styles, I faced an issue when building the second carousel. I used the Swiper Element (WebComponent) in React and injected custom styles using injectStyles to change the styles of the swiper-pagination class. I also created divs outside the to display the navigation and pagination outside of the carousel based on the page design.

The problem arose when the styles from the first carousel were being applied to the second carousel, preventing me from overriding them. I'm seeking ideas on how to prevent this issue and ensure that each carousel has its own distinct styles. Additionally, I'm curious about the reasons why sometimes the styles applied through injectStyles are not being properly displayed.

Any suggestions or insights would be greatly appreciated. Thank you!

This is the code for the first carousel

`import React, { useRef, useEffect } from 'react';
import { register } from 'swiper/element/bundle';
import ArticleCardContainer from './ArticleCard';

import { ArrowRight, ArrowLeft } from './Icons';

register();

export const PropertiesNewsCarousel = () => {
const { articles } = Homeflow.get('latestPropertyNews');
const isBackgroundWhite = Homeflow.get('isBackgroundWhite').is_background_white;

const swiperElRef = useRef(null);

// Swiper Element web components - css to overide shadown down styles
const navigationStyles = {
position: 'static',
height: '14px',
marginTop: '0 !important',
width: 'calc(var(--swiper-navigation-size) / 44 * 27)',
zIndex: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};

useEffect(() => {
const swiperContainer = swiperElRef.current;

const params = {
  grabCursor: true,
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 40,
  // Responsive breakpoints
  breakpoints: {
    // small screens
    640: {
      slidesPerView: 1,
      spaceBetween: 40,
    },
    // medium screens
    768: {
      slidesPerView: 2,
      spaceBetween: 50,
    },
    // normal laptop screens
    1024: {
      slidesPerView: 3,
      spaceBetween: 60,
    },
  },
  mousewheel: {
    forceToAxis: true,
  },
  paginationClickable: true,
  pagination: {
    el: '.property-news-swiper-paginations',
    dynamicBullets: true,
    clickable: true,
    dynamicMainBullets: 3,
  },
  navigation: {
    nextEl: '.property-news-swiper-button-next',
    prevEl: '.property-news-swiper-button-prev',
  },
  injectStyles: [
    `
      .swiper-pagination-bullet,
      .swiper-pagination-bullet-active-prev,
      .swiper-pagination-bullet-active-next,
      .swiper-pagination-bullet-active-prev-prev,
      .swiper-pagination-bullet-active-next-next {
        background-color: transparent;
      }

      .swiper-pagination-bullet.swiper-pagination-bullet-active-main {
        width: 10px;
        height: 10px;
        background-color: ${isBackgroundWhite ? '#002844' : '#fff'};
      }

      .swiper-pagination {
        bottom: -60px !important;
      }

      .property-news-swiper-paginations {
        margin: 44px auto 0;
        transform: translateX(0) !important;
      }

      .property-news-swiper-button-next.swiper-button-disabled,
      .property-news-swiper-button-prev.swiper-button-disabled {
        opacity: .35;
        cursor: auto;
        pointer-events: none;
      }
  `,
  ],
};

Object.assign(swiperContainer, params);
swiperContainer.initialize();

}, []);

return (

{articles?.map(article => (

<ArticleCardContainer imageUrl={article?.image} title={article?.title} articleUrl={/articles/${article?.slug}} />

))}

  {/* Boolet points pagination */}
  <div className="property-news-swiper-paginations" />

  {/* isBackgroundWhite type String */}

  {/* Arrows navigation */}
  <div className={`${isBackgroundWhite ? 'swiper-buttons-box' : 'swiper-buttons-box-primary'}`}>
    <section className={`${isBackgroundWhite ? 'swiper-buttons-box__section' : 'swiper-buttons-box-primary__section'}`}>
      <div className="property-news-swiper-button-prev" style={navigationStyles}>
        <ArrowLeft className={`${isBackgroundWhite ? 'swiper-buttons-box__section-arrow' : 'swiper-buttons-box-primary__section-arrow'}`} />
      </div>
      <div className="property-news-swiper-button-next" style={navigationStyles}>
        <ArrowRight className={`${isBackgroundWhite ? 'swiper-buttons-box__section-arrow' : 'swiper-buttons-box-primary__section-arrow'}`} />
      </div>
    </section>
  </div>
</section>

);
};

export default PropertiesNewsCarousel;
`

and this is the code for the second

`import React, { useRef, useEffect } from 'react';
import { uniqueKey } from 'homeflowjs';
import { register } from 'swiper/element/bundle';

register();

const PromoBoxesCarousel = () => {
const promoCardsData = Homeflow.get('promoCards').promo_cards_data;

const swiperElRef = useRef(null);

// Swiper Element web components - css to overide shadown down styles
const paginationStyles = {
backgroundColor: '#fff',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '15px',
transform: 'translateX(0)',
};

useEffect(() => {
const swiperContainer = swiperElRef.current;
const params = {
grabCursor: true,
// Default parameters
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// small screens
640: {
slidesPerView: 1,
},
// medium screens
768: {
slidesPerView: 3,
},
// small laptop screens
1024: {
slidesPerView: 4,
},
// normal laptop screens
1400: {
slidesPerView: 5,
},
},
mousewheel: {
forceToAxis: true,
},
paginationClickable: true,
pagination: {
el: '.promo-swiper-paginations',
dynamicBullets: true,
clickable: true,
dynamicMainBullets: 3,
},
injectStyles: [
`
.swiper-pagination-bullet,
.swiper-pagination-bullet-active-prev,
.swiper-pagination-bullet-active-next,
.swiper-pagination-bullet-active-prev-prev,
.swiper-pagination-bullet-active-next-next {
background-color: transparent !important;
}

      .swiper-pagination-bullet.swiper-pagination-bullet-active-main {
        width: 10px;
        height: 10px;
        background-color: #002844 !important;
      }

      .swiper-pagination {
        bottom: -60px !important;
      }

      .promo-swiper-paginations {
        margin: 44px auto 0;
        transform: translateX(0) !important;
      }
  `,
  ],
};

Object.assign(swiperContainer, params);
swiperContainer.initialize();

}, []);

return (

{promoCardsData?.map(card => (

<section className="promo-boxes__item" style={{ backgroundImage: url(${card.image_url}) }}>

{ card.title }

{ card.button_title }

            <div className="promo-boxes__item-content-box">
              <p className="promo-boxes__item-content-text">{ card.content }</p>
              <a className="promo-boxes__item-content-button" href={card.button_url}>{ card.button_title }</a>
            </div>
          </div>
        </section>
      </swiper-slide>
    ))}
  </swiper-container>

  {/* Boolet points pagination */}
  <div className="promo-paginations-box">
    <div className="promo-swiper-paginations" style={paginationStyles} />
  </div>
</section>

);
};

export default PromoBoxesCarousel;
`

[paulosjunior7]

managed to solve?
I have the same problem

[wds-williambay]

Just at a quick glance, your swiperContainer and params are named the same thing for both instances. Try changing renaming the second set swiperContainer2, and Params2. Don't forget to change the callbacks as well.