How to set styles for <swiper-slide> when using injectStyles in Swiper Element (WebComponent)?

Question

I'm using Swiper Element (WebComponent) and I'm trying to adjust the styles of each slide. I'm using injectStyles for this purpose, which works fine for most parts:

export const PROJECT_SWIPER_OPTIONS: SwiperOptions = {
  direction: 'horizontal',
  loop: false,
  grabCursor: true,
  navigation: true,
  injectStyles: [`
    :host {
      height: 100%;
    }

    :host .swiper-wrapper {
      border: 1px solid red;
    }

    :host .swiper-slide {
      border: 1px solid green;
    }
  `],
};

The styles for :host and :host .swiper-wrapper are applied correctly. Unfortunately the styles for :host .swiper-slide are ignored. I also tried :host .slide, :host swiper-slide but it won't work either.

It seems that the styles aren't applied since the <swiper-slide> elements are slotted into the shadow element.

Any idea how to style the elements?

Currently I'm using this in my Angular project:

:host ::ng-deep {
  swiper-slide {
    border: 1px solid green;
  }
}

Which works, but I do have styles in the Swiper config and the componentn SCSS now. This doesn't seem right.

Grubstake

Can you provide a minimal reproducible example of your problem? – Carping

Lo has solucionado?, tengo el mismo problema en react – Humbert

@CamiloVasquez I solved it temporarily by adding styles to the swiper-slide-element like shown in the question. The :host ::ng-deep { }-selector can be omitted and is Angular specific. So it should work in React also. – Grubstake

Answer 1

You can add the following to your stylesheet in case you are using the Swiper Element (WebComponent). Look at the html and the parts that you can use, e.g. ::part(pagination) for the Pagination module.

swiper-container {
    --swiper-theme-color: #ababab;
    --swiper-navigation-size: 22px;
    --swiper-navigation-color: #e1e1e1;
    --swiper-navigation-top-offset: 10px;
    --swiper-navigation-sides-offset: 10px;
    --swiper-pagination-color: #92a4ae;
    --swiper-pagination-bullet-border-radius: 6px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-vertical-gap: 4px;
    --swiper-pagination-bullet-size: 6px;
    --swiper-pagination-bullet-width: 6px;
    --swiper-pagination-bullet-height: 6px;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-inactive-color: #254a5d;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bottom: 0rem;
    --swiper-preloader-color: var(--swiper-theme-color);
}

swiper-container {
    /* styles */
}

swiper-container::part(bullet) {
    /* styles */
}

swiper-container::part(bullet-active) {
    /* styles */
}

swiper-container::part(pagination) {
    /* styles */
}

swiper-container::part(container) {
    /* styles */
}

swiper-container::part(button-prev),
swiper-container::part(button-next) {
    /* styles */
}

Yousuf

Thank you! Somehow missed this in the documentation. Works as expected. – Declivous

One limitation: I wasn't able to style the disabled state of the buttons. To solve that, I just implemented custom nav elements with the code below and wrote my own CSS. <swiper-container navigation-next-el=".my-swiper-button-next" navigation-prev-el=".my-swiper-button-prev" </swiper-container"> <div class="my-swiper-button-prev"></div> <div class="my-swiper-button-next"></div> – Declivous