{% load static %}
<section style="background-color: #3C3C3C;">
    <div class="px-4 py-5 my-5 text-center">
        <h2 class="display-5 fw-bold text-white">Фотографии</h2>
        <div class="col-lg-6 mx-auto">
            <div class="slider slider-for">
                {% for item in slider_items %}
                <div class="slick-track" style="opacity: 1;">
                    <div class="image-container">
                        <img src="{{ item.image.url }}" alt="{{ item.title }}" class="rounded-image">
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="slider slider-nav">
                {% for item in slider_items %}
                <div class="slick-slide">
                    <div class="image-nav-container">
                        <img src="{{ item.image.url }}" alt="{{ item.title }}" class="rounded-image thumbnail">
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>