Реализация «активного» класса CSS на активном ионном слайде

Question

Я хочу изменить css активного слайда в 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>

Заранее спасибо ..

.scss

  .slider_selected_text{
    color : #ed1a3b
    }
 .slider_unselected_text{
   }

Answer 1

Трудно сказать, просите ли вы добавить класс active к стороне sccs или динамически добавить класс CSS к элементу ion-slide.Я полагаю, вы просите сторону scss.Если это не так, пожалуйста, дайте мне знать, и я обновлю ответ.

Вы можете добавить .active класс к scss файлу, например так:

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

      }
  }

}

Надеюсь, что это даст вамподсказка.