Блог

Итак, в основном я сделал карусель, используя Flickity, и внутри каждого слайда есть изображение и кнопка, при нажатии на которую открывается текст.

Чего я пытаюсь добиться, так это того, что когда пользователь нажимает, чтобы перейти к следующему элементу в Карусели, текст затем возвращается к отображению без отображения, пока кнопка не будет нажата снова.

Моя кнопка переключения —

 function toggleText(){
  var elms = document.getElementsByClassName("figure-caption-test");
  var select = document.getElementsByClassName(".carousel-cell-test.is-selected");

  Array.from(elms).forEach((x) => {
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  })
}
 

Моя Карусель —

 jQuery(function ($) {
    var parent = $(".carousel-test");
    var divs = $(".carousel-cell-test").not(".carousel-cell-test.is-selected");
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});
 

Мой HTML —

  <div class="carousel-test" data-flickity>
      {% for image in images %}
      <div class="carousel-cell-test">
      {# <img src="wp-content/themes/cc/Components/SliderImages/screenshot.png"> #}
                <figure class="figure">
                  {# <img src="wp-content/themes/cc/Components/SliderImages/screenshot.png"> #}
                  <img class="figure-image lazyload"
                    data-flickity-lazyload="{{ image.src|resizeDynamic(0, 540) }}"
                    srcset="{{ placeholderImage(image.aspect * 540, 540) }}"
                    data-srcset=">
                  {% if image.caption %}
                  <button class="figure-button" id="figure-button" onclick="toggleText()">
        REVEAL ANSWER
    </button>
    
                    <figcaption class="figure-caption-test" id="reveal-text" style="display: none;">{{ image.caption|e }}</figcaption>
                  {% endif %}
                </figure>
                  </div>
            {% endfor %}
    
    </div>
 

Поскольку слайдер сделан с использованием Flickity, большая часть кода находится в консоли. Это то, чего я пытаюсь достичь, но это не сработает, когда я попытаюсь это реализовать. Но я думал, что добавление чего-то подобного в мой «toggleText» исправит эту проблему.

 var button = document.getElementsByClassName("flickity-prev-next-button").onclick = function(){
      document.getElementsByClassName("figure-caption-test").style.display = "none";
    }
 

Кроме того, я делаю это веточкой. Мы будем очень признательны за любую помощь.