Блог

Здравствуйте, я довольно новичок в стилизации и видел связанные с этим вопросы, но не смог извлечь свое собственное решение из их ответов. Я надеюсь, что кто-нибудь сможет объяснить мне, почему эта карусель работает так, как задумано в Chrome и Edge, но не в Firefox. Я попытался дублировать почти все объявления CSS с префиксом-moz без какого-либо заметного влияния.

Что менее важно, я смог анимировать кнопки навигации,только ориентируясь на их идентификаторы. Первоначально ориентируясь на их класс, n-й ребенок не имел никакого эффекта,

Эта скрипка демонстрирует нежелательное поведение: https://jsfiddle.net/gharyiey/8h1tLxgo/42/ Если вы примените цвет к div «carousel_snapper», вы увидите, что он действительно анимируется, но соседний div, содержащий изображение, — нет.

Мы будем очень признательны за любую помощь…

CSS

 @keyframes indicate {
  0%, 70% {
    background-color: #fff;
  }

  70%, 100% {
    background-color: #333;
  }
}


@keyframes tonext {
  75% {
    left: 0%;
  }

  95% {
    left: 100%;
  }

  98% {
    left: 100%;
  }

  99% {
    left: 0%;
  }
}

@keyframes tostart {
  75% {
    left: 0%;
  }

  95% {
    left: -300%;
  }

  98% {
    left: -300%;
  }

  99% {
    left: 0%;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }

  97% {
    scroll-snap-align: none;
  }

  99% {
    scroll-snap-align: none;
  }

  100% {
    scroll-snap-align: center;
  }
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /*thumb and track color*/ 
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

.carousel > ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}

.carousel__viewport {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
}

.carousel__slide::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -40%, 70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  /*background-color: greenyellow;  <-- UNCOMMENT TO SEE ANIMATED DIV*/
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: snap, tonext;
    animation-timing-function: ease;
    animation-duration: 4100ms;
    animation-iteration-count: infinite;
  }

  #nav1 {
    animation: indicate 12300ms infinite -1000ms;
  }

  #nav2 {
    animation: indicate 12300ms infinite 3100ms;
  }

  #nav3 {
    animation: indicate 12300ms infinite 7200ms;
  }

  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-play-state: paused;
}

.carousel:hover #nav1,
.carousel:focus-within #nav1 {
  animation-play-state: paused;
}

.carousel:hover #nav2,
.carousel:focus-within #nav2 {
  animation-play-state: paused;
}

.carousel:hover #nav3,
.carousel:focus-within #nav3 {
  animation-play-state: paused;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.dummy_img {
  height:290px;
  width:640px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img_text {
  text-align: center;
  vertical-align: middle;
  line-height: 290px;
}
 

HTML

 <h1 style="text-align:center">PURE CSS/HTML CAROUSEL WITH ANIMATED NAV</h1>
<section class="carousel" aria-label="Gallery">
  <ol class="carousel__viewport">
    <li id="carousel__slide1" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <div class="dummy_img">
        <h1 class="img_text">IMAGE 1</h1>
          <!--<a href="">
            <img src="img1.jpg" alt="alt_tag_1">
          </a>-->
      </div>
    </li>
    <li id="carousel__slide2" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <div class="dummy_img">
        <h1 class="img_text">IMAGE 2</h1>
          <!--<a href="">
            <img src="img2.jpg" alt="alt_tag_2">
          </a>-->
      </div>
    </li>
    <li id="carousel__slide3" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <div class="dummy_img">
        <h1 class="img_text">IMAGE 3</h1>
          <!--<a href="">
            <img src="img3.jpg" alt="alt_tag_3">
          </a>-->
      </div>
    </li>
  </ol>
  <aside class="carousel__navigation">
    <ol class="carousel__navigation-list">
      <li class="carousel__navigation-item">
        <a href="#carousel__slide1" class="carousel__navigation-button" id="nav1">Go to slide 1</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide2" class="carousel__navigation-button" id="nav2">Go to slide 2</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide3" class="carousel__navigation-button" id="nav3">Go to slide 3</a>
      </li>
    </ol>
  </aside>
</section>