<?php include 'header.php'; ?>

<style>
    .web-app-top-bar {
        display: none !important
    }
</style>

<div class="page default-layout page-name">

    <div class="ds-section">

        <div class="ds-title">
            <h1 class="text-center"> Swiper </h1>
        </div>

        <div class="container">
 
            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> test 2 swiper ( id = test2 )</h3>

                <div class="swiper-slider-wrapper arrows-sides pagination-bottom card" style="border: 1px solid #ff000022">

                    <div class="swiper-container swiper-custom"
                        data-per-view="4"
                        data-per-view-md="3"
                        data-per-view-sm="2"
                        data-per-view-xs="1"
                        data-space-between="40"
                        data-next-button="test2-button-next" data-prev-button="test2-button-prev" data-pagination="test2-pagination">

                        <div class="swiper-wrapper">

                            <?php foreach (range(0, 20) as $inner_i) { ?>

                                <div class="swiper-slide">

                                    <div class="card text-center base-border p-2">
                                        <div class="color-primary h3 m-4"> <?php echo $inner_i ?> </div>
                                    </div> <!-- card -->

                                </div>

                            <?php } ?>

                        </div>

                    </div>

                    <div class="swiper-button-prev" id="test2-button-prev">
                        <i class="icon icon-arrow-circle-left"></i>
                    </div>

                    <div class="swiper-button-next" id="test2-button-next">
                        <i class="icon icon-arrow-circle-right"></i>
                    </div>

                    <div class="pagination-wrapper">
                        <div class="swiper-pagination" id="test2-pagination"></div>
                    </div>

                </div> <!-- swiper-slider-wrapper -->

            </div> <!-- ds-sub-section -->

            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Default Values 1 swiper </h3>

                <div class="swiper-slider-wrapper arrows-sides card" style="border: 1px solid #ff000022">

                    <div class="swiper-container swiper-custom">

                        <div class="swiper-wrapper">

                            <?php foreach (range(0, 20) as $inner_i) { ?>

                                <div class="swiper-slide">

                                    <div class="card text-center base-border p-2">
                                        <div class="color-primary h3 m-4"> <?php echo $inner_i ?> </div>
                                    </div> <!-- card -->

                                </div>

                            <?php } ?>

                        </div>

                    </div>

                    <div class="swiper-button-prev">
                        <i class="icon icon-arrow-circle-left"></i>
                    </div>

                    <div class="swiper-button-next">
                        <i class="icon icon-arrow-circle-right"></i>
                    </div>

                </div> <!-- swiper-slider-wrapper -->

            </div> <!-- ds-sub-section -->

            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Default Values 2 swiper </h3>

                <div class="swiper-slider-wrapper arrows-sides card" style="border: 1px solid #ff000022">

                    <div class="swiper-container swiper-custom">

                        <div class="swiper-wrapper">

                            <?php foreach (range(0, 20) as $inner_i) { ?>

                                <div class="swiper-slide">

                                    <div class="card text-center base-border p-2">
                                        <div class="color-primary h3 m-4"> <?php echo $inner_i ?> </div>
                                    </div> <!-- card -->

                                </div>

                            <?php } ?>

                        </div>

                    </div>

                    <div class="swiper-button-prev">
                        <i class="icon icon-arrow-circle-left"></i>
                    </div>

                    <div class="swiper-button-next">
                        <i class="icon icon-arrow-circle-right"></i>
                    </div>

                </div> <!-- swiper-slider-wrapper -->

            </div> <!-- ds-sub-section -->




            <div class="mb-5">
                <hr />
                <hr />
                <hr />
                <hr />
                <hr />
            </div>




            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Categories swiper </h3>

                <div class="swiper-slider-wrapper arrows-sides pagination-bottom card" style="border: 1px solid #ff000022">

                    <div class="swiper-container swiper-custom"
                        data-per-view="9"
                        data-per-view-md="6"
                        data-per-view-sm="4"
                        data-per-view-xs="2"
                        data-space-between="20"
                        data-next-button="categories-button-next"
                        data-prev-button="categories-button-prev"
                        data-pagination="categories-pagination">

                        <div class="swiper-wrapper">

                            <?php foreach ($categoriesList as $index => $item) { ?>

                                <div class="swiper-slide">
                                    <div class="p-0">
                                        <div class="category-card-square flex-center flex-column">
                                            <img src="assets/img/thumbs/categories/0<?php echo $index + 1 ?>.png" class="w-100 h-100 mb-2">
                                            <h6> <?php echo $item ?> </h6>
                                        </div>
                                    </div>
                                </div>

                            <?php } ?>

                        </div>

                    </div> <!-- swiper-container -->

                    <div class="swiper-button-prev categories-button-prev">
                        <i class="icon icon-arrow-circle-left"></i>
                    </div>

                    <div class="swiper-button-next categories-button-next">
                        <i class="icon icon-arrow-circle-right"></i>
                    </div>

                    <div class="pagination-wrapper">
                        <div class="swiper-pagination" id="categories-pagination"></div>
                    </div>

                </div> <!-- swiper-slider-wrapper -->

            </div> <!-- ds-sub-section -->

            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Products Swiper </h3>

                <div class="swiper-slider-wrapper arrows-sides pagination-bottom card" style="border: 1px solid #ff000022">

                    <div class="swiper-container swiper-custom"
                        data-per-view="5"
                        data-per-view-md="4"
                        data-per-view-sm="3"
                        data-per-view-xs="2"
                        data-space-between="10"
                        data-next-button="products-button-next"
                        data-prev-button="products-button-prev"
                        data-pagination="products-pagination">

                        <div class="swiper-wrapper">

                            <?php foreach ($categoriesList as $index => $item) { ?>

                                <div class="swiper-slide">

                                    <div class="product-card-square">

                                        <div class="top">
                                            <div class="sale-and-wishlist-wrapper">
                                                <a href="#" class="wishlist-button">
                                                    <i class="icon icon-wishlist <?php if ($index < 3) echo 'icon-wishlist-fill' ?>"></i>
                                                </a>
                                                <div class="sale">
                                                    <span class="num"> 18% </span>
                                                    <span class="text"> Off</span>
                                                </div>
                                            </div>
                                            <img src="assets/img/thumbs/products/0<?php echo $index + 1 ?>.jpg" class="product-image">
                                        </div><!-- top -->

                                        <div class="bottom">

                                            <p class="product-name"> XT10 Camera Shutter 30000 67 mB a0000 67 mB a0000 6 </p>

                                            <div class="flex-between align-items-end">
                                                <div class="d-block">
                                                    <p class="product-old-price"> 522.000 KWD </p>
                                                    <p class="product-price"> 421.000 KWD </p>
                                                </div>
                                                <div class="d-block">
                                                    <i class="icon icon-wishlist"></i>
                                                </div>
                                            </div>


                                        </div><!-- bottom -->
                                    </div><!-- product-card-square -->

                                </div>

                            <?php } ?>

                        </div>

                    </div> <!-- swiper-container -->

                    <div class="swiper-button-prev" id="products-button-prev">
                        <i class="icon icon-arrow-circle-left"></i>
                    </div>

                    <div class="swiper-button-next" id="products-button-next">
                        <i class="icon icon-arrow-circle-right"></i>
                    </div>

                    <div class="pagination-wrapper">
                        <div class="swiper-pagination" id="products-pagination"></div>
                    </div>

                </div> <!-- swiper-slider-wrapper -->

            </div> <!-- ds-sub-section -->



            <div class="ds-sub-section mb-5">

                <h3 class="text-left mb-4"> Stores Swiper </h3>

                <div class="swiper-slider-wrapper arrows-sides pagination-bottom card" style="border: 1px solid #ff000022">

                    <div class="swiper-container swiper-custom"
                        data-per-view="8"
                        data-per-view-md="6"
                        data-per-view-sm="4"
                        data-per-view-xs="2"
                        data-space-between="10"
                        data-next-button="stores-button-next"
                        data-prev-button="stores-button-prev"
                        data-pagination="stores-pagination">

                        <div class="swiper-wrapper">

                            <?php foreach ($storesList as $index => $item) { ?>

                                <div class="swiper-slide">
                                    <div class="store-card-square flex-center flex-column">
                                        <img src="assets/img/thumbs/stores/0<?php echo $index + 1 ?>.png" class="w-100 h-100 mb-2">
                                        <h6> <?php echo $item ?> </h6>
                                    </div>
                                </div>

                            <?php } ?>

                        </div>

                    </div> <!-- swiper-container -->

                    <div class="swiper-button-prev" id="stores-button-prev">
                        <i class="icon icon-arrow-circle-left"></i>
                    </div>

                    <div class="swiper-button-next" id="stores-button-next">
                        <i class="icon icon-arrow-circle-right"></i>
                    </div>

                    <div class="pagination-wrapper">
                        <div class="swiper-pagination" id="stores-pagination"></div>
                    </div>

                </div> <!-- swiper-slider-wrapper -->

            </div> <!-- ds-sub-section -->






        </div> <!-- container -->

    </div> <!-- ds-section -->



    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div> <!-- page -->

<?php include 'footer.php'; ?>