GravTheme/templates/modular/slideshowext.html.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>