{% if slideshow is not empty %}

    <div class="sliderContainer{% if slider_boxed %} boxed{% endif %}">
        <div class="sliderWrap">
            <ul class="slider">

                {% for slide in slideshow %}
                    {% if slide['Image']['value'] is not empty %}
                        <li>
                            {% if slide['Link']['value'] is not empty %}
                                <a href="{{ slide['Link']['value'] }}">
                            {% endif %}
                                <picture>
                                    {% if slide['Mobile Image']['value'] is not empty %}
                                        <source srcset="/{{ image_folders['slideshow_images']['slide_mobile']['path'] }}/{{ slide['Mobile Image']['value'] }}" media="(max-width: 640px)">
                                    {% endif %}
                                    <img srcset="/{{ image_folders['slideshow_images']['slide']['path'] }}/{{ slide['Image']['value'] }}" alt="{{ slide['Image']['alt'] }}">
                                </picture>

                                <div class="innerText">
                                    <div class="slideshowPosition">
                                        <div class="slideshowText">

                                            {% if slide['Title']['value'] is not empty %}
                                                <h2>{{ slide['Title']['value'] }}</h2>
                                            {% endif %}

                                            {% if slide['Sub Title']['value'] is not empty %}
                                                <h3>{{ slide['Sub Title']['value'] }}</h3>
                                            {% endif %}

                                            {% if slide['Link']['value'] is not empty and slide['Button Text']['value'] is not empty %}
                                                <div class="button">
                                                    {{ slide['Button Text']['value'] }}
                                                </div>
                                            {% endif %}

                                        </div> <!-- .slideshowText -->
                                    </div> <!-- .slideshowPosition -->
                                </div> <!-- .innerText -->
                            {% if slide['Link']['value'] is not empty %}
                                </a>
                            {% endif %}
                        </li>
                    {%  endif  %}
                {% endfor %}

            </ul>
        </div> <!-- .sliderWrap -->
    </div> <!-- .sliderContainer -->

{% endif %}
