<div class="containerslide"> 
 <?if($IMG_URL1$)?><div class="mySlides"><a href="$IMG_URL1$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL1$"></a></div><?endif?>
 <?if($IMG_URL2$)?><div class="mySlides"><a href="$IMG_URL2$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL2$"></a></div><?endif?>
 <?if($IMG_URL3$)?><div class="mySlides"><a href="$IMG_URL3$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL3$"></a></div><?endif?>
 <?if($IMG_URL4$)?><div class="mySlides"><a href="$IMG_URL4$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL4$"></a></div><?endif?>
 <?if($IMG_URL5$)?><div class="mySlides"><a href="$IMG_URL5$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL5$"></a></div><?endif?>
 <?if($IMG_URL6$)?><div class="mySlides"><a href="$IMG_URL6$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL6$"></a></div><?endif?>
 <?if($IMG_URL7$)?><div class="mySlides"><a href="$IMG_URL7$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL7$"></a></div><?endif?>
 <?if($IMG_URL8$)?><div class="mySlides"><a href="$IMG_URL8$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL8$"></a></div><?endif?>
 <?if($IMG_URL9$)?><div class="mySlides"><a href="$IMG_URL9$" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="$IMG_URL9$"></a></div><?endif?>

<?if($IMG_URL2$ || $IMG_URL3$ || $IMG_URL4$ || $IMG_URL5$ || $IMG_URL6$ || $IMG_URL7$ || $IMG_URL8$ || $IMG_URL9$)?>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

 <div class="row">
 <?if($IMG_URL1$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL1$" onclick="currentSlide(1)"></div><?endif?>
 <?if($IMG_URL2$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL2$" onclick="currentSlide(2)"></div><?endif?>
 <?if($IMG_URL3$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL3$" onclick="currentSlide(3)"></div><?endif?>
 <?if($IMG_URL4$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL4$" onclick="currentSlide(4)"></div><?endif?>
 <?if($IMG_URL5$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL5$" onclick="currentSlide(5)"></div><?endif?>
 <?if($IMG_URL6$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL6$" onclick="currentSlide(6)"></div><?endif?>
 <?if($IMG_URL7$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL7$" onclick="currentSlide(7)"></div><?endif?>
 <?if($IMG_URL8$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL8$" onclick="currentSlide(8)"></div><?endif?>
 <?if($IMG_URL9$)?><div class="column slidimg"><img class="demo cursor h-full w-full object-fill" src="$IMG_URL9$" onclick="currentSlide(9)"></div><?endif?>
</div>
<?endif?>
 </div>

.containerslide {position: relative;padding:0px!important;}
.mySlides {display: none;}
.cursor {cursor: pointer;}
.prev, .next {top: 50%;height: 50px;width: 30px;cursor: pointer;font-size: 1.25rem;position: absolute;text-align: center;line-height: 55px;background: #0000003b;transform: translateY(-50%);transition: transform 0.1s linear;transform: translateY(-50%);transition: transform 0.1s linear;color: #fbc100;}
.next {right: 0;}
.prev:hover, .next:hover {color:#444;}
.prev i:active{transform: translateY(-50%) scale(0.85);}
.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
.slidimg {width: 100%;height: 60px;}
.row:after {content: "";display: table;clear: both;}
.column {float: left;width: 16.66%;}
.demo {opacity: 0.6;}
.active, .demo:hover {opacity: 1;}
.object-fill {-o-object-fit: cover;object-fit: cover;}
.w-full {width: 100%;}
.h-full {height: 100%;}
.row {display:flex;}
.mySlides img {width:100%;height: 450px;object-fit: cover;}
.mySlides img:hover {cursor:zoom-in;}

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
 showSlides(slideIndex += n);
}

function currentSlide(n) {
 showSlides(slideIndex = n);
}

function showSlides(n) {
 let i;
 let slides = document.getElementsByClassName("mySlides");
 let dots = document.getElementsByClassName("demo");
 let captionText = document.getElementById("caption");
 if (n > slides.length) {slideIndex = 1}
 if (n < 1) {slideIndex = slides.length}
 for (i = 0; i < slides.length; i++) {
 slides[i].style.display = "none";
 }
 for (i = 0; i < dots.length; i++) {
 dots[i].className = dots[i].className.replace(" active", "");
 }
 slides[slideIndex-1].style.display = "block";
 dots[slideIndex-1].className += " active";
 captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
 <script>$(document).ready(function(){$('.mySlides img').mouseover(function(){if(parseInt($(this).css('height'))==450px||parseInt($(this).css('width'))==100%){if($(this).parent('a').html()!=null ){$(this).after('<a href="'+$(this).parent('a').attr('href')+'" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="'+$(this).attr('src')+'" title="სურათის გადიდება" alt=""></a>');$(this).remove()}else{$(this).after('<a href="'+$(this).attr('src')+'" class="ulightbox" data-fancybox-group="ulightboxgroup"><img src="'+$(this).attr('src')+'" title="სურათის გადიდება" alt=""></a>');$(this).remove()}}})});</script>