0

I have a ionic 4 slides component in which i want to change styling of the pagination bullets

<ion-slides class="lyt-carousel" pager="true" [options]="slideOpts">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>

I'm able to change the color of the bullets by the below code(CODE #1) bt i want to add more customization like border-color,padding etc, which current I'm not able to do it (CODE #2)

CODE #1

.lyt-carousel {
  --bullet-background-active: red;
  --bullet-background: white;
  }

CODE #2

ion-slides {
  .swiper-pagination-bullets {

    margin-top: 15px;
    .swiper-pagination-bullet {
      border: 5px solid blue;
    }
  }
}
deep dalvi
  • 119
  • 1
  • 1
  • 17

1 Answers1

1

Although ::ng-deep is deprecated. Take a look here

:host ::ng-deep .swiper-pagination-bullets {

  margin-top: 15px;

  .swiper-pagination-bullet {
    border: 5px solid blue;
  }
}

I would recommend a better way to implement you own style is setting it from the options. Here is the API reference for further need

slideOpts = {
  initialSlide: 0,
  speed: 400,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    renderBullet: (index, className) => {
      return '<span style="border: 5px solid blue;"class="' + className + '"></span>';
    }
  }
};
arif08
  • 746
  • 7
  • 15
  • 1
    Actually no need of ::ng-deep as it is depricated. View Encapsulation is a property in angular using which i can achieve the expected result [link](https://angular.io/api/core/ViewEncapsulation) . Another website [link](https://drafts.csswg.org/css-scoping-1/) there they have explained the concept of shadow DOM and slots. – deep dalvi Apr 25 '20 at 19:02
  • Yes.. I have attached a link to my comment which holds the same link you just shared. Anyway, I did point it out that I recommend that a better way to achieve this is by setting it from the `options`. – arif08 Apr 26 '20 at 05:29