Как изменить цвет заголовка и нумерации страниц на разных слайдах, используя swiper? - PullRequest
Новая
       16

Как изменить цвет заголовка и нумерации страниц на разных слайдах, используя swiper?

0 голосов
/ 09 апреля 2019

Я использую swiper API для полноэкранного слайдера. Я хотел бы изменить цвет навигации и цвет пагинации в зависимости от фона слайдера. Если фон темный, то навигация и пагинация белые. И наоборот.

https://www.ramotion.com/agency

https://codepen.io/Ebo/pen/XQpror

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide dark">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 text-left">
            <h4>Featured</h4>
            <h1>Designing a new<br> dimension of<br> Test</h1>
            <div>
              <a href="#" class="btn button" role="button" aria-pressed="true">Full project</a>
            </div>
          </div>
          <div class="col-12 col-md-6">
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide white">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 text-left">
            <h4>Featured</h4>
            <h1>Designing a new<br> dimension of<br> Test</h1>
            <div>
              <a href="#" class="btn button" role="button" aria-pressed="true">Full project</a>
            </div>
          </div>
          <div class="col-12 col-md-6">
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide red">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 text-left">
            <h4>Featured</h4>
            <h1>Designing a new<br> dimension of<br> Test</h1>
            <div>
              <a href="#" class="btn button" role="button" aria-pressed="true">Full project</a>
            </div>
          </div>
          <div class="col-12 col-md-6">
          </div>
        </div>
      </div>
    </div>
...