{#

Element ID: Element10
Element Name: Wide Slider

#}

<section class="wide-slider">
    <div class="container container--smaller wide-slider__container text-align-center">

        <h2 class="h1 text-align-center text-uppercase">{{ element.title }}</h2>
        {% if element.slides is not empty %}

        
         <div class="gallery-slider">
            <div class="navigation-wrapper">
                <div id="js-keen-slider" class="keen-slider">
                    {% for item in element.slides %}
                    <div class="keen-slider__slide">
                        {% set image = Image(item.image) %}
                        <img class="" src="{{ TimberImage(image.src | resize(1280)) }}" alt="{{ image.alt }}">
                        <div class="center-desc">
                            <span class="h2 text-align-center">{{ item.text }}</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>   
                    <svg  id="arrow-left"  class="arrow arrow--left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-left"></use></svg>        
                    <svg id="arrow-right"  class="arrow arrow--right"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-right"></use></svg>
            </div>
            <div id="dots" class="dots"></div>
        </div>
        {% endif %}
        <a href="{{ element.link }}" class="btn btn--primary">{{ element.button_text }}</a>
    </div>
</section>