==
<section class="hero">
    <div class="hero_wrap">
        <div class="hero_slider">
            
            {% for item in sliders %}
            <div class="hero_item">
                <div class="hero_item-photo">
                    
                    <img src="{{item.image.path}}" alt="hero_item-photo">
                </div>

                <!-- <a href="{{item.link}}" class="hero_item-link">
                    {{'Подробней'|_}}
                
                    <span>
                        <svg width="16" height="9" viewBox="0 0 16 9" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M15.3536 4.85355C15.5488 4.65829 15.5488 4.34171 15.3536 4.14645L12.1716 0.964466C11.9763 0.769204 11.6597 0.769204 11.4645 0.964466C11.2692 1.15973 11.2692 1.47631 11.4645 1.67157L14.2929 4.5L11.4645 7.32843C11.2692 7.52369 11.2692 7.84027 11.4645 8.03553C11.6597 8.2308 11.9763 8.2308 12.1716 8.03553L15.3536 4.85355ZM0 5H15V4H0V5Z"
                                fill="white" />
                        </svg>
                    </span>
                </a> -->
            </div>
            {% endfor %}
        </div>
    </div>
</section>

{% put scripts %}
    <script>

        // Page count =====================
        var $slider = $('.hero_slider');

        if ($slider.length) {
            var currentSlide;
            // var slidesCount;
            var sliderCounter = document.createElement('div');
            sliderCounter.classList.add('slider__counter');

            var updateSliderCounter = function (slick, currentIndex) {
                currentSlide = slick.slickCurrentSlide() + 1;
                slidesCount = slick.slideCount;
                $(sliderCounter).text(currentSlide)
            };

            $slider.on('init', function (event, slick) {
                $slider.append(sliderCounter);
                // updateSliderCounter(slick);
            });


            $slider.slick();
        }

        // Scrollbar ===================

    </script>
{% endput %}