1

I want to change css of active slide in DOM

.html

 <ion-slides>
  <ion-slide class="swiper-slide"></ion-slide>
  <ion-slide class="swiper-slide active"></ion-slide> // <-- Active slide in DOM
  <ion-slide class="swiper-slide"></ion-slide>
 </ion-slides>

Thanks in advance..

.scss

  .slider_selected_text{
    color : #ed1a3b
    }
 .slider_unselected_text{
   }
bunny
  • 1,316
  • 2
  • 13
  • 22
  • Your starting point is to use `ngClass` for example https://stackoverflow.com/questions/55146414/ionic-4-ion-slides-change-css-style-of-the-active-slide-using-ngclass?rq=1 – rtpHarry Jun 17 '19 at 11:28

1 Answers1

1

It is hard to tell if you are asking for adding active class to the sccs side or dynamically adding a CSS class to ion-slide element. I assume you are asking for scss side. If not so, please let me know and I will update the answer.

You can add .active class to scss file like this:

.swiper-slide {

   // Assuming "slider_selected_text" is covered by "swiper-slide" class

  & .slider_selected_text{ // note that there is a space between & and class name
    color : #ed1a3b
  }

  & .slider_unselected_text{

  }

  &.active{ // note that there is NOT a space between & and class name means this will apply to the elements having both classes

     & .slider_selected_text{ // note that there is a space between & and class name
        color : #ed1a3b
      }

      & .slider_unselected_text{

      }
  }

}

Hope this will give you a clue.

Harun Yilmaz
  • 8,281
  • 3
  • 24
  • 35
  • Thank You for replying Harun.. but I want to change CSS class dynamically. On (click) of ion-Slide, that particular slide should get "slider_selected_text" CSS. I would be glad if you help me out with logic! Thanks in advance! – bunny Jun 17 '19 at 11:45
  • 1
    Allright I get it. I will try to update the answer. – Harun Yilmaz Jun 17 '19 at 11:50
  • I tried it in stackblitz, but there's a problem I could not solve now. But I will try again when I have time. In the mean time, you can search for `ionSlideDidChange` and `getActiveIndex` and set corresponding class with `ngClass`. – Harun Yilmaz Jun 17 '19 at 12:53
  • Thanks Harun for trying!..I am getting ActiveIndex now..but i dont know how to use that index to change CSS. – bunny Jun 17 '19 at 13:28
  • `` I guess something like this would work. You just need to store the active index in `activeIndex` property of component. And `2` is hardcoded since you do not use `*ngFor` to generate slides. You need to change it accordingly. – Harun Yilmaz Jun 17 '19 at 13:42
  • Or you can do like: `` – Harun Yilmaz Jun 17 '19 at 13:45