<div class="img-zoom-container">
    <div class="img-zoom-main">
        <img class="img-zoom-main" src="https://cdn.kashkom.com/public/uploads/cTyXKqaQMr7k9fLjdHoblXb0QU7ZAkehfDK0iBXF.jpg"
            width="420" height="420" style="display:block; max-width:100%;">
        <div id="lens" class="img-zoom-lens"></div>
    </div>
    <div id="result" class="img-zoom-result"></div>
</div>




<div class="products-gallery-wrapper">

    <div class="swiper products-swiper">

        <div class="swiper-wrapper">

            <?php for ($i = 1; $i <= 10; $i++) { ?>
                <div class="swiper-slide">
                    <?php if ($productType == 1) { ?>
                        <img src="assets/img/thumbs/products/0<?php echo $i; ?>.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
                    <?php } elseif ($productType == 2) { ?>
                        <img src="assets/img/thumbs/cards/0<?php echo $i; ?>.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
                    <?php } ?>
                </div>
            <?php } ?>

            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-1.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-2.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-3.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-4.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-5.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-6.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-7.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-8.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-9.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-10.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>

        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <div class="swiper products-thumbs-swiper">

        <div class="swiper-wrapper">

            <?php for ($i = 1; $i <= 10; $i++) { ?>

                <div class="swiper-slide">

                    <?php if ($productType == 1) { ?>
                        <img src="assets/img/thumbs/products/0<?php echo $i; ?>.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
                    <?php } elseif ($productType == 2) { ?>
                        <img src="assets/img/thumbs/cards/0<?php echo $i; ?>.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
                    <?php } ?>
                </div>
            <?php } ?>

            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-1.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-2.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-3.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-4.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-5.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-6.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-7.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-8.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-9.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
            <div class="swiper-slide">
                <img src="https://swiperjs.com/demos/images/nature-10.jpg" onerror="this.onerror=null; this.src='assets/img/thumbs/products/default.jpg';" />
            </div>
        </div>
        
    </div>

</div>