javascript - 如何使不同的幻灯片在单个页面上工作？

Question

我目前正在用 twig(craftCMS) 编写一个网上商店原型，并希望每个项目都有自己的小幻灯片。当我创建控制按钮时，它们都只引用一个幻灯片，所以它们隐藏了我所有的其他幻灯片。

这就是我所坚持的：

HTML：

{% extends "_kleidunglayout" %}

{% block content %}

{%set KleiderQuery = craft.entries()
    .section('shop')
    .descendantOf(245)
    %}

{% set entries = KleiderQuery.all() %}

    {% for entry in entries|batch(3)%}
    <div class="row">
        {% for entry in entries%}
        <div class="col l4 m12 s12">
        <h4>{{entry.title}}</h4>
        {% set slides = entry.artikelbild.limit(3) %}
        {% if slides %}
        <ul class="slideshow">
{# Output slides, using the same "slides" variable #}
        {% for slide in slides %}
        <li class="slide"><img class="news-image mySlides" src="{{ slide.url }}" alt="{{ slide.title }}"></li>
        {% endfor %}
        </ul>
        <div style="text-align:center">
            {% for slide in slides %}
            <span class="dot" onclick="currentSlide({{loop.index}})"></span>
            {% endfor %}
        </div>
        {% endif %}
        <p>{{entry.produktebeschreibung}}</p>
        <p>Preis: {{entry.artikelpreis}}</p>
         </div>
    {%endfor%}
        </div>
    {% endfor %}



{% endblock %}

CSS：

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

脚本：

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

我还在学习写作，所以感谢您指出我的错误:)

标签： javascripthtmlcsstwigcraftcms