CODEWITHSUNDEEP
typescriptangular6ionic4
bunny
bunny

Reputation: 1366

Implementing 'active' css class on active ion-slide

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{
   }

Upvotes: 1

Views: 663

Answers (1)

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

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.

Upvotes: 1

Related Questions