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

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

    <!-- Ru -->
    {% if lng == 'ru' %}
    <a href="{{ item.link ? item.link : '#' }}" class="advert_item">
        <img src="{{ item.slide_img_ru|media }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi,">
    </a>
    {% endif %}

    <!-- Tm -->
    {% if lng == 'tm' %}
    <a href="{{ item.link ? item.link : '#' }}" class="advert_item">
        <img src="{{ item.slide_img_tm|media }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi,">
    </a>
    {% endif %}

    <!-- En -->
    {% if lng == 'en' %}
    <a href="{{ item.link ? item.link : '#' }}" class="advert_item">
        <img src="{{ item.slide_img_en|media }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi,">
    </a>
    {% endif %}
    {% endfor %}
</div>

{% put scripts %}

<script>

    $(window).on('load', function() {

        let ImagePauses = {{ __SELF__.slidesDisplays }}


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


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

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

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

    })
</script>

{% endput %}