问题描述
我目前正在用 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";
}
我仍在学习写作,所以感谢您指出我的错误:)
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)