{% set slider = __SELF__.slider %}
{% set lng = __SELF__.lng %}

<div class="intro_slider">
    {% for item in slider.slide_items %}
    <div class="slider_item">

        <!-- Ru -->
        {% if lng == 'ru' %}
        <div class="slider_content">
            <a href="{{ item.link ? item.link : '#' }}" class="slider_title">
                {{ item.slide_title_ru }}
            </a>
        </div>
        <div class="slider_item-img">
            <img src="{{ item.slide_img_ru|media }}" alt="">
        </div>
        {% endif %}

        <!-- En -->
        {% if lng == 'en' %}
        <div class="slider_content">
            <a href="{{ item.link ? item.link : '#' }}" class="slider_title">
                {{ item.slide_title_en }}
            </a>
        </div>
        <div class="slider_item-img">
            <img src="{{ item.slide_img_en|media }}" alt="">
        </div>
        {% endif %}

        <!-- Tm -->
        {% if lng == 'tm' %}
        <div class="slider_content">
            <a href="{{ item.link ? item.link : '#' }}" class="slider_title">
                {{ item.slide_title_tm }}
            </a>
        </div>
        <div class="slider_item-img">
            <img src="{{ item.slide_img_tm|media }}" alt="">
        </div>
        {% endif %}
    </div>
    {% endfor %}
    
</div>

{% put scripts %}

<script>
    $(window).on('load', function() {

        let ImagePauses = {{ __SELF__.slidesDisplays }}

        $(".intro_slider").slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            autoplay: true,
            dots: false,
            // autoplaySpeed: 3000,
            autoplaySpeed: ImagePauses[0] * 1000,
            pauseOnHover: false,


            infinite: true,
            speed: 1000,
            fade: true,
            adaptiveHeight: false,
            lazyLoad: 'ondemand',

            cssEase: 'linear',
            swipeToSlide: true,
            waitForAnimate: false,
            draggable: true,
        });

        // Sliding settings
        $(".intro_slider").on("afterChange", function (event, slick, currentSlide) {
            $(".intro_slider").slick(
                "slickSetOption",
                "autoplaySpeed",
                ImagePauses[currentSlide] * 1000,
                true
            );
        });
    })
</script>

{% endput %}