CODEWITHSUNDEEP
javascriptcssswiper.js
lampshade
lampshade

Reputation: 2816

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

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.

Upvotes: 8

Views: 4695

Answers (1)

Ren&#233;
Ren&#233;

Reputation: 69

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

Upvotes: 6

Related Questions