swiper.js - Angular 17 swiper custom pagination bullet color - Stack Overflow

admin管理员组

文章数量:1122796

How can I define a custom color for the active pagination bullet? In the docs, there is a pagination parameter bulletActiveClass that takes a custom CSS class for the active pagination bullet. I tried defining a custom CSS class in my appponent.css and assigning it to the parameter, but it has no effect.

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <p>Swipe to change slides</p>
    <swiper-container [pagination]="{ clickable: true,  bulletActiveClass: 'custom-bullet' }">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
    </swiper-container>
  `,
  styles: [
    `
    swiper-slide {
      height: 400px;
    }
    swiper-slide:nth-of-type(1) {
      background-color: red;
    }
    swiper-slide:nth-of-type(2) {
      background-color: green;
    }
    swiper-slide:nth-of-type(3) {
      background-color: blue;
      color: white;
    }
    swiper-slide:nth-of-type(4) {
      background-color: yellow;
    }
  `,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {}

StackBlitz

本文标签： swiperjsAngular 17 swiper custom pagination bullet colorStack Overflow