Enable carousel in the Category and Product list view

<?php
	
	// Get a db connection.
	$db = JFactory::getDbo();
	
	// Create a new query object.
	$query = $db->getQuery(true);
	
	$query->select('file_path');
	$query->from($db->quoteName('tbuonapp_hikashop_file'));
	$query->where('file_ref_id = ' . '"' . $this->row->category_id . '"');

	// Reset the query using our newly populated query object.
	$db->setQuery($query);
	$foto_1 = $db->loadResult();
	
	
	// Get a db connection.
	$db = JFactory::getDbo();
	
	// Create a new query object.
	$query = $db->getQuery(true);
	
	$query->select('foto_2');
	$query->from($db->quoteName('tbuonapp_hikashop_category'));
	$query->where('category_id = ' . '"' . $this->row->category_id . '"');

	// Reset the query using our newly populated query object.
	$db->setQuery($query);
	$foto_2 = $db->loadResult();
	
	
	// Get a db connection.
	$db = JFactory::getDbo();
	
	// Create a new query object.
	$query = $db->getQuery(true);
	
	$query->select('foto_3');
	$query->from($db->quoteName('tbuonapp_hikashop_category'));
	$query->where('category_id = ' . '"' . $this->row->category_id . '"');

	// Reset the query using our newly populated query object.
	$db->setQuery($query);
	$foto_3 = $db->loadResult();
	
	$categoryImages[$this->row->category_id] .= $foto_1 . ",";
	
	if($foto_2){
		$categoryImages[$this->row->category_id] .= $foto_2 . ",";
	}
	if($foto_3){
		$categoryImages[$this->row->category_id] .= $foto_3;
	}
?>

<div class="hikashop_category_image">
	<a href="<?php echo $this->row->link;?>" title="<?php echo $this->escape($this->row->category_name); ?>">
		<?php
		$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
		$img = $this->image->getThumbnail(@$this->row->file_path, array('width' => $this->image->main_thumbnail_x, 'height' => $this->image->main_thumbnail_y), $image_options);
		if($img->success) {
			$html = '<img class="hikashop_product_listing_image" id="pics_' .  $this->row->category_id . '" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';
			if($this->config->get('add_webp_images', 1) && function_exists('imagewebp') && !empty($img->webpurl)) {
				$html = '
				<picture>
					<source srcset="'.$img->webpurl.'" type="image/webp">
					<source srcset="'.$img->url.'" type="image/'.$img->ext.'">
					'.$html.'
				</picture>
				';
			}
			echo $html;
		}
		?>
	</a>
	
	<?php if($foto_2 OR $foto_3){ ?>
		<img src="/images/back.png" id="backbtn<?php echo $this->row->category_id ?>" class="btnBack" onclick="prevImage('<?php echo $this->row->category_id ?>', '<?php echo $categoryImages[$this->row->category_id] ?>')" width="30px" /><img src="/images/next.png" class="btnNext" id="nextbtn<?php echo $this->row->category_id ?>" onclick="nextImage( '<?php echo $this->row->category_id ?>', '<?php echo $categoryImages[$this->row->category_id] ?>')" width="30px" />
	<?php } ?>
</div>

<script>
	
	var index = 0;
	
	function nextImage(category_id_image, category_images) {
		
		var arrayImages = category_images.split(",");
		
		if(index < arrayImages.length - 1){
			
			index += 1;
			
			console.log(arrayImages[index]);
			
			document.getElementById('pics_' + category_id_image).src = "/media/com_hikashop/upload/safe/"  + arrayImages[index];
			
			if(index == arrayImages.length - 1){
				document.getElementById("nextbtn" + category_id_image).style.display = "none";
				document.getElementById("backbtn" + category_id_image).style.display = "block";
			}else{
				document.getElementById("nextbtn" + category_id_image).style.display = "block";
				document.getElementById("backbtn" + category_id_image).style.display = "block";
			}
			
		}
	}
	
	function prevImage(category_id_image, category_images) {
		
		var arrayImages = category_images.split(",");
		
		if(index > 0){
			index -= 1;
			
			if(index == 0){
				document.getElementById('pics_' + category_id_image).src = "/images/com_hikashop/upload/thumbnails/174x310fsO/"  + arrayImages[index];
			}else{
				document.getElementById('pics_' + category_id_image).src = "/media/com_hikashop/upload/safe/"  + arrayImages[index];
			}
			
			if(index == 0){
				document.getElementById("backbtn" + category_id_image).style.display = "none";
				document.getElementById("nextbtn" + category_id_image).style.display = "block";
			}else{
				document.getElementById("backbtn" + category_id_image).style.display = "block";
				document.getElementById("nextbtn" + category_id_image).style.display = "block";
			}
			
		}
	}
</script>