В этой статье блога мы рассмотрим различные методы реализации ползунка паузы Oxygen при наведении курсора мыши с помощью CSS и JavaScript. Ползунок паузы позволяет пользователям останавливать автоматический переход слайдов при наведении на них курсора, предоставляя им больше контроля и улучшая общее впечатление. Мы предоставим примеры кода для каждого метода, которые помогут вам реализовать эту функцию на вашем веб-сайте на базе Oxygen.

Метод 1: свойство перехода CSS

/* HTML */
<div class="slider-container">
  <div class="slider">
    <!-- slider items -->
  </div>
</div>
/* CSS */
.slider-container:hover .slider {
  animation-play-state: paused;
}

В этом методе мы используем псевдокласс CSS :hover, чтобы нацелиться на контейнер слайдера и приостановить анимацию, определенную в элементе слайдера, установив для свойства animation-play-stateзначение ” приостановлено» при наведении курсора.

Метод 2: прослушиватели событий JavaScript

<!-- HTML -->
<div class="slider-container">
  <div class="slider">
    <!-- slider items -->
  </div>
</div>
<!-- JavaScript -->
<script>
  const sliderContainer = document.querySelector('.slider-container');
  const slider = document.querySelector('.slider');
  sliderContainer.addEventListener('mouseenter', () => {
    slider.style.animationPlayState = 'paused';
  });
  sliderContainer.addEventListener('mouseleave', () => {
    slider.style.animationPlayState = 'running';
  });
</script>

В этом подходе мы используем JavaScript для добавления прослушивателей событий в контейнер слайдера. Когда мышь входит в контейнер, мы приостанавливаем анимацию, устанавливая для свойства animation-play-stateзначение «paused». Когда мышь покидает контейнер, мы возобновляем анимацию, устанавливая для свойства animation-play-stateзначение «running».

Метод 3: переходы CSS и классы JavaScript

<!-- HTML -->
<div class="slider-container">
  <div class="slider paused">
    <!-- slider items -->
  </div>
</div>
<!-- CSS -->
<style>
  .paused {
    animation-play-state: paused;
  }
</style>
<!-- JavaScript -->
<script>
  const sliderContainer = document.querySelector('.slider-container');
  const slider = document.querySelector('.slider');
  sliderContainer.addEventListener('mouseenter', () => {
    slider.classList.add('paused');
  });
  sliderContainer.addEventListener('mouseleave', () => {
    slider.classList.remove('paused');
  });
</script>

В этом методе мы объединяем CSS и JavaScript для переключения класса CSS в элементе слайдера. Класс .pausedустанавливает для свойства animation-play-stateзначение «приостановлено». Когда мышь входит в контейнер, мы добавляем класс, чтобы приостановить анимацию, а когда мышь покидает контейнер, мы удаляем класс, чтобы возобновить анимацию.

Реализовав слайдер «Кислородная пауза» при наведении курсора, вы можете предоставить пользователям лучший контроль над слайдером и улучшить общее впечатление от посещения вашего веб-сайта. Мы исследовали три разных метода: использование псевдокласса CSS :hover, использование прослушивателей событий JavaScript и объединение переходов CSS с классами JavaScript. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните улучшать удобство использования уже сегодня.