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 ponentn SCSS now. This doesn't seem right.

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 ponentn SCSS now. This doesn't seem right.

• javascript
• css
• swiper.js

Share Improve this question Follow edited Aug 29, 2023 at 6:46 lampshade asked Aug 18, 2023 at 8:47 lampshadelampshade 2,81677 gold badges4646 silver badges8989 bronze badges 3

• Can you provide a minimal reproducible example of your problem? – imhvost Commented Aug 23, 2023 at 19:59
• Lo has solucionado?, tengo el mismo problema en react – Camilo Vasquez Commented Sep 30, 2023 at 20:29
• 1 @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. – lampshade Commented Oct 5, 2023 at 7:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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