Блог

Главная - Вопросы по программированию - Javascript для автоматической анимации карусели, используемой вместе с элементами управления

Javascript для автоматической анимации карусели, используемой вместе с элементами управления

#javascript #input #carousel #tailwind-css #checked

#javascript #входные данные #карусель #попутный ветер-css #проверено

Вопрос:

У меня есть карусель, в которой есть кнопки next и previous, а также интерактивные индикаторы «blobs», чтобы показать, какое изображение отображается в данный момент. Он построен с использованием только CSS и радиовходов с метками. (см https://tailwind-elements.com/docs/standard/components/carousel / для моей отправной точки).

 document.querySelectorAll('.carousel').forEach((carousel) => {
  animate_carousel(carousel);
  carousel.querySelectorAll("input[type='radio']").forEach((input) => {
    input.addEventListener('change', function() {
      animate_carousel(carousel);
    });
  });
});

function animate_carousel(carousel) {
  setTimeout(function() {
    let radio = carousel.querySelector('input[type="radio"]:checked');
    let next = carousel.querySelector('label.control-'   parseInt(radio.dataset.index, 10)   '.next');
    carousel.querySelector('input#'   next.getAttribute('for')).click();
    animate_carousel(carousel);
  }, 5000, carousel);
} 
 .carousel-open:checked .carousel-item {
  position: static;
  opacity: 100;
}

.carousel-item {
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}

[id^="carousel-"][id$="-0"]:checked~.control-0,
[id^="carousel-"][id$="-1"]:checked~.control-1,
[id^="carousel-"][id$="-2"]:checked~.control-2 {
  display: block;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

[id^="carousel-"][id$="-0"]:checked~.control-0~.carousel-indicators li:nth-child(1) .carousel-bullet,
[id^="carousel-"][id$="-1"]:checked~.control-1~.carousel-indicators li:nth-child(2) .carousel-bullet,
[id^="carousel-"][id$="-2"]:checked~.control-2~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #2b6cb0;
  /*Set to match the Tailwind colour you want the active one to be */
} 
 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="carousel relative rounded-lg relative overflow-hidden shadow-xl border-4 bg-white border-white my-4">

  <div class="carousel-inner relative overflow-hidden rounded-b-md rounded-t-sm w-full">
    <input class="carousel-open" data-index="0" type="radio" id="carousel-1-0" name="carousel-1" aria-hidden="true" hidden="">
    <div class="carousel-item absolute opacity-0 bg-center bg-no-repeat h-0 bg-cover" style="padding-bottom: 33.33%; background-image: url(https://mdbootstrap.com/img/new/slides/054.jpg);"></div>
    <label for="carousel-1-1" class="control-0 w-8 h-8 ml-2 sm:ml-3 md:ml-4 lg:ml-5 md:ml-10 absolute cursor-pointer hidden font-bold rounded-full leading-tight text-center z-10 inset-y-0 left-0 my-auto flex justify-center content-center">
    <
</label>
    <label for="carousel-1-1" class="next control-0 w-8 h-8 mr-2 sm:mr-3 md:mr-4 lg:mr-5 absolute cursor-pointer hidden rounded-full leading-tight text-center z-10 inset-y-0 right-0 my-auto">
    >
</label>

    <input class="carousel-open" data-index="1" type="radio" id="carousel-1-1" name="carousel-1" aria-hidden="true" hidden="" checked="checked">
    <div class="carousel-item absolute opacity-0 bg-center bg-no-repeat h-0 bg-cover" style="padding-bottom: 33.33%; background-image: url(https://mdbootstrap.com/img/new/slides/043.jpg);"></div>
    <label for="carousel-1-0" class="control-1 w-8 h-8 ml-2 sm:ml-3 md:ml-4 lg:ml-5 md:ml-10 absolute cursor-pointer hidden font-bold rounded-full leading-tight text-center z-10 inset-y-0 left-0 my-auto flex justify-center content-center">
    <
</label>
    <label for="carousel-1-0" class="next control-1 w-8 h-8 mr-2 sm:mr-3 md:mr-4 lg:mr-5 absolute cursor-pointer hidden rounded-full leading-tight text-center z-10 inset-y-0 right-0 my-auto">
    >
</label>

    <ol class="carousel-indicators">
      <li class="inline-block">
        <label for="carousel-1-0" class="carousel-bullet cursor-pointer text-xs block text-white hover:text-blue-700 opacity-75">
                •
            </label>
      </li>
      <li class="inline-block">
        <label for="carousel-1-1" class="carousel-bullet cursor-pointer text-xs block text-white hover:text-blue-700 opacity-75">
                •
            </label>
      </li>
    </ol>
  </div>
</div>

Я пытаюсь сделать так, чтобы это автоматически прокручивало изображения каждые 5 секунд. Это работает, если я не нажимаю кнопки, чтобы вручную перемещаться по изображениям. Затем он возвращает следующую ошибку.

Неперехваченное исключение DOMException: не удалось выполнить ‘removeNamedItem’ для ‘NamedNodeMap’: элемент с именем ‘checked’ не найден.

Я не уверен, почему я получаю эту ошибку, хотя, похоже, там есть проверенный ввод.

Комментарии:

1. Я не понимаю, какой должна быть точка этой строки в первую очередь. Установка другого переключателя в группе checked переключателей автоматически удалит проверенное состояние со всех других радиостанций в этой группе.

2. @CBRO Это то, что я подумал, однако это работает только в первый раз, если я этого не включу. Затем он застревает на втором изображении в карусели

3. В настоящее время все это, похоже, вообще не работает должным образом, после нажатия на эти индикаторы пару раз все ускоряется… У вас есть animate_carousel сам вызов в конце, так что в сочетании с setTimeout это в основном то же самое, что и интервал. Но затем, когда эти индикаторы будут нажаты, ypu вызовет animate_carousel снова — таким образом, у вас фактически будет несколько таких интервалов таймера, работающих параллельно.

Метки: ,