HTML CSS Поместите точки в анимированное слайд-шоу с содержанием изображения ссылки - PullRequest
Новая
       22

HTML CSS Поместите точки в анимированное слайд-шоу с содержанием изображения ссылки

0 голосов
/ 11 февраля 2020

Как я могу заполнить "точки" в моем слайд-шоу?

Мое слайд-шоу состоит из 4 элементов, при нажатии на элемент перенаправляется на другую страницу (например, в Google).

Чтобы заставить его работать, я нашел это решение: анимировать слайд-шоу ссылок. Каждая ссылка имеет текст и изображение. (это работает)

Но слайд-шоу автоматическое c, и мне бы хотелось, чтобы каждый раз, когда отображался элемент (когда появляется ссылка с изображением и текстом), соответствующая точка заливалась черным.

Я пытался сделать это по-другому, но у меня было много проблем со ссылками.

Я не знаю, объяснил ли я себя хорошо, но я приложил код, анимацию CSS и стили "точек".

ПД. Назовите мой слайдер слайд-шоу. 

div.dots {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: end;
}

div.dots div {
  width: 10px;
  height: 10px;
  border: 1px solid black;
  border-radius: 50%;
}

div.dots div:hover {
  background-color: black;
}

a.slide {
  position: absolute;
  -webkit-animation: round 40s infinite;
  opacity: 0;
}

@-webkit-keyframes round {
  25% {
    opacity: 1;
    z-index: 990;
  }
  40% {
    opacity: 0;
    z-index: 1;
  }
}

.slider a:nth-child(4) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -ms-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}

.slider a:nth-child(3) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -ms-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}

.slider a:nth-child(2) {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -ms-animation-delay: 10s;
  -o-animation-delay: 10s;
  animation-delay: 10s;
}

.slider a:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}
<div class="slider">
  <a class="slide" href="https://google.com.mx" target="_blank">
    <div class="text">
      <p>Some text 1</p>
    </div>
    <img src="<?=base_url()?>assets/img/2.jpg">
  </a>

  <a class="slide" href="https://google.com.mx" target="_blank">
    <div class="text">
      <p>Some text 2</p>
    </div>
    <img src="<?=base_url()?>assets/img/3.jpg">
  </a>

  <a class="slide" href="https://google.com.mx" target="_blank">
    <div class="text">
      <p>Some text 3</p>
    </div>
    <img src="<?=base_url()?>assets/img/2.jpg">
  </a>

  <a class="slide" href="https://google.com.mx" target="_blank">
    <div class="text">
      <p>Some text 4</p>
    </div>
    <img src="<?=base_url()?>assets/img/1.jpg">
  </a>
</div>

<div class="dots">
  <div focus=""></div>
  <div></div>
  <div></div>
  <div></div>
</div>

1 Ответ

0 голосов
/ 11 февраля 2020

Поскольку кажется, что вы хотите избегать использования любых JavaScript, похоже, что наиболее разумным способом было бы добавить CSS для тех "точек" div, которые просто совпадают со временем анимации вашего слайдера. Например: 

@-webkit-keyframes highlight-dot {
  0% {
    background-color: black;
  }

  /* Increasing/decreasing this percent can help you get interesting fade effects. */
  10% {
    background-color: white;
  }

  100% {
    background-color: white; /* Return to default */
  }
}

div.dots div {
  background-color: white;
  -webkit-animation: highlight-dot 40s infinite;
}

/* Now set the animation delays to match your slider links */
div.dots div:nth-of-type(4) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -ms-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}

/* ... etc. */

Вы также можете установить 0% по умолчанию (скажем, белый) и меньшее число, например, 5%, в «активный» цвет (скажем, черный) для начальной анимации исчезновения. .

Последнее замечание: у вас есть некоторые браузерные префиксы, но для большей кросс-платформенной функциональности вам нужно будет добавить больше (например, у вас есть @ -webkit-keyframes для поддержки более старых версий Chrome, но нет @keyframes по умолчанию для современных браузеров).

...