<section class="banner-three bg-img z-[1] relative">
    <div class="bg-img-custom">
        <img src="views/assets/images/line-pattern.png" alt="Image">
    </div>
    <img src="views/assets/images/star-shape.png" alt="Image" class="animation star-shape animation-rotate">
    <img src="views/assets/images/star-shape.png" alt="Image" class="animation star-shape style-two animation-rotate">
    <img src="views/assets/images/line-shape.png" alt="Image" class="animation line-shape opacity-75 animation-rotate">

    <h1 class="display-200 text-white opacity-25 absolute right-0 inset-block-end-0 mb-0 line-height-73">Fashion</h1>

    <div class="flex items-center">
        <button type="button" id="banner-three-prev" class="slick-prev">←</button>
        <button type="button" id="banner-three-next" class="slick-next">→</button>
    </div>

    <div class="container container-lg">
        <div class="banner-three-slider" id="slider-container">
            <!-- اسلایدها توسط JS اضافه می‌شوند -->
        </div>
    </div>
</section>

<!-- jQuery و Slick Slider -->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<!--<script src="assets/js/slick.min.js"></script>-->

<!-- JS اسلایدر داینامیک -->
<script src="views/api/slider/slider.js"></script>
















<!--<section class="banner-three bg-img z-[1] relative">-->
<!--    <div class="bg-img-custom"><img src="views/assets/images/line-pattern.png" alt="Image"></div><img-->
<!--        src="views/assets/images/star-shape.png" alt="Image" class="animation star-shape animation-rotate"> <img-->
<!--        src="views/assets/images/star-shape.png" alt="Image" class="animation star-shape style-two animation-rotate">-->
<!--    <img src="views/assets/images/line-shape.png" alt="Image" class="animation line-shape opacity-75 animation-rotate">-->
<!--    <h1 class="display-200 text-white opacity-25 absolute right-0 inset-block-end-0 mb-0 line-height-73">Fashion-->
<!--    </h1>-->
<!--    <div class="flex items-center"><button type="button" id="banner-three-prev"-->
<!--            class="slick-prev slick-arrow flex items-center justify-center rounded-[50%] border border-white hover-border-main-600 text-white text-2xl hover-bg-main-600 hover-text-white transition-1 absolute top-[50%] translate-y-[-50%] inset-inline-start-0 ms-lg-5 ms-32"><i-->
<!--                class="ph ph-caret-left"></i></button> <button type="button" id="banner-three-next"-->
<!--            class="slick-next slick-arrow flex items-center justify-center rounded-[50%] border border-white hover-border-main-600 text-white text-2xl hover-bg-main-600 hover-text-white transition-1 absolute top-[50%] translate-y-[-50%] right-0 me-lg-5 me-32"><i-->
<!--                class="ph ph-caret-right"></i></button></div>-->
<!--    <div class="container container-lg">-->
<!--        <div class="banner-three-slider">-->
<!--            <div class="">-->
<!--                <div class="row items-center g-4">-->
<!--                    <div class="xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto">-->
<!--                        <div class="span3"><span class="text-white mb-8 h6 wow bounceIn">UP TO 50% OFF</span>-->
<!--                            <h1 class="text-white display-one wow bounceInLeft">New <span-->
<!--                                    class="font-normal text-main-two-600 font-heading-four wow bounceIn"-->
<!--                                    data-wow-duration="2s" data-wow-delay=".5s">Style</span> Just For You.</h1>-->
<!--                            <p class="text-white max-w-472 text-2xl mb-24 wow bounceInUp">You appear ordinary if you-->
<!--                                dress simply. We are able to help you.</p><a href="shop.html"-->
<!--                                class="btn btn-outline-white inline-flex items-center rounded-[50rem] gap-8 mt-lg-4 mt-sm-1 wow bounceIn"-->
<!--                                tabindex="0">Shop Now<span class="icon text-xl flex"><i-->
<!--                                        class="ph ph-shopping-cart-simple"></i></span></a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto">-->
<!--                        <div class="flex justify-center wow bounceIn" data-wow-duration="3s" data-wow-delay=".5s"-->
<!--                            data-tilt data-tilt-max="16" data-tilt-speed="500" data-tilt-perspective="5000"-->
<!--                            data-tilt-scale="1.06"><img src="views/assets/images/banner/banner9.png" alt="Image">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="">-->
<!--                <div class="row items-center g-4">-->
<!--                    <div class="xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto">-->
<!--                        <div class=""><span class="text-white mb-8 h6 wow bounceIn">UP TO 50% OFF</span>-->
<!--                            <h1 class="text-white display-one wow bounceInLeft">New <span-->
<!--                                    class="font-normal text-main-two-600 font-heading-four wow bounceIn"-->
<!--                                    data-wow-duration="2s" data-wow-delay=".5s">Style</span> Just For You.</h1>-->
<!--                            <p class="text-white max-w-472 text-2xl">You appear ordinary if you dress simply. We are-->
<!--                                able to help you.</p><a href="shop.html"-->
<!--                                class="btn btn-outline-white inline-flex items-center rounded-[50rem] gap-8 mt-48 wow bounceIn"-->
<!--                                tabindex="0">Shop Now<span class="icon text-xl flex"><i-->
<!--                                        class="ph ph-shopping-cart-simple"></i></span></a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto">-->
<!--                        <div class="flex justify-center wow bounceIn" data-wow-duration="3s" data-wow-delay=".5s"-->
<!--                            data-tilt data-tilt-max="12" data-tilt-speed="500" data-tilt-perspective="5000"-->
<!--                            data-tilt-full-page-listening data-tilt-scale="1.06"><img-->
<!--                                src="views/assets/images/banner-three-img2.png" alt="Image"></div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="">-->
<!--                <div class="row items-center g-4">-->
<!--                    <div class="xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto">-->
<!--                        <div class=""><span class="text-white mb-8 h6 wow bounceIn">UP TO 50% OFF</span>-->
<!--                            <h1 class="text-white display-one wow bounceInLeft">New <span-->
<!--                                    class="font-normal text-main-two-600 font-heading-four wow bounceIn"-->
<!--                                    data-wow-duration="2s" data-wow-delay=".5s">Style</span> Just For You.</h1>-->
<!--                            <p class="text-white max-w-472 text-2xl">You appear ordinary if you dress simply. We are-->
<!--                                able to help you.</p><a href="shop.html"-->
<!--                                class="btn btn-outline-white inline-flex items-center rounded-[50rem] gap-8 mt-48 wow bounceIn"-->
<!--                                tabindex="0">Shop Now<span class="icon text-xl flex"><i-->
<!--                                        class="ph ph-shopping-cart-simple"></i></span></a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="xl:w-6/12 flex-grow-0 flex-shrink-0 basis-auto">-->
<!--                        <div class="flex justify-center wow bounceIn" data-wow-duration="3s" data-wow-delay=".5s"-->
<!--                            data-tilt data-tilt-max="12" data-tilt-speed="500" data-tilt-perspective="5000"-->
<!--                            data-tilt-full-page-listening data-tilt-scale="1.06"><img-->
<!--                                src="views/assets/images/banner-three-img3.png" alt="Image"></div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->