58 lines
2.7 KiB
Twig
58 lines
2.7 KiB
Twig
{% set slides = page.header.slides %}
|
|
|
|
{% block custom_stylesheets %}
|
|
{% do assets.addCss('theme://css/slideshowext.css', 90) %}
|
|
{% set slideStyle %}
|
|
{% for image in slides %}
|
|
.slideshow-ext > .slide-content {
|
|
transition: visibility 0s {{ page.header.transduration }}s, opacity {{ page.header.transduration }}s linear;
|
|
}
|
|
|
|
#slide{{ loop.index }}:checked ~ #slide-content{{ loop.index }} {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: visibility 0s {{ page.header.transduration }}s, opacity {{ page.header.transduration }}s {{ page.header.transduration }}s linear;
|
|
}
|
|
{% endfor %}
|
|
{% for image in slides %}
|
|
.slideshow-ext > input:nth-of-type({{ loop.index }}):checked ~ .slideshow-controls > label:nth-of-type({{ loop.index0 }}){% if loop.index < slides|length %},{% endif %}
|
|
{% endfor %}{
|
|
display: block;
|
|
left: 0;
|
|
right: auto;
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
{% for image in slides %}
|
|
.slideshow-ext > input:nth-of-type({{ loop.index }}):checked ~ .slideshow-controls > label:nth-of-type({{ loop.index + 1 }}){% if loop.index < slides|length %},{% endif %}
|
|
{% endfor %}{
|
|
display: block;
|
|
right: 0;
|
|
left: auto;
|
|
-moz-transform: rotate(225deg);
|
|
-ms-transform: rotate(225deg);
|
|
-o-transform: rotate(225deg);
|
|
-webkit-transform: rotate(225deg);
|
|
transform: rotate(225deg);
|
|
}
|
|
{% endset %}
|
|
{% do assets.addInlineCss(slideStyle, 90) %}
|
|
{% endblock %}
|
|
<div class="page-cell-fullwidth">
|
|
<div class="text-tab-content grid-prop current-tab">
|
|
<div class="text-inner">
|
|
<div class="slideshow-ext">
|
|
{% for image in slides %}
|
|
<input type="radio" name="slide" id="slide{{ loop.index }}"{% if loop.index == 1 %} checked{% endif %} />
|
|
{% endfor %}
|
|
{% for image in slides %}<div id="slide-content{{ loop.index }}" class="slide-content"><div><h6>{{ image.title }}</h6><p>{{ image.description|markdown }}</p>{% if image.url != '' %}<a href="{{ image.url }}">{{ image.btn }}</a>{% endif %}</div><img loading="lazy" src="{{ page.media[image.image].url|e }}" alt="Slide"></div>{% endfor %}
|
|
<div class="slideshow-controls">
|
|
{% for image in slides %}<label for="slide{{ loop.index }}"></label>{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |