Carrousel d'images dans description du produit

<!-- THUMBNAILS -->
  <?php hikashop_loadJslib('swiper'); ?>
	<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div swiper">
        <div class="swiper-button-prev"></div>

      <div class="swiper-wrapper">
<?php
	if( !empty($this->element->images) && count($this->element->images) > 1) {
		$firstThunb = true;
		$i = 0;
		foreach($this->element->images as $key => $image) {
			$id = null;
			$classname = 'hikashop_child_image';
			$thumbnail_class = 'hikashop_thumbnail_'.$key;
			if($firstThunb) {
				$id = 'hikashop_first_thumbnail'.$variant_name;
				$firstThunb = false;
				$classname .= ' hikashop_child_image_active';
				$thumbnail_class .= ' hikashop_active_thumbnail';
			}
			$thumbnail_class = 'class="'.$thumbnail_class.'"';

			if(!$this->config->get('thumbnail')) {
				$attr = $thumbnail_class.' title="'.$this->escape((string)@$image->file_description).'" onmouseover="return window.localPage.changeImage('
				. 'this, \'hikashop_main_image'.$variant_name.'\', \''.$this->image->uploadFolder_url . $image->file_path.'\', 0, 0, \''.str_replace(array("'", '"'),
				array("\'", '&quot;'),@$image->file_description).'\', \''.str_replace(array("'", '"'),array("\'", '&quot;'),@$image->file_name).'\', '.$key.');"';

				$html = '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" title="'.$this->escape((string)@$image->file_description).'" alt="' . $this->escape((string)@$image->file_name) . '" class="'.$classname.'" />';
				echo '<a href="#" '.$attr.'>'.$html.'</a>';
				continue;
			}
			if($this->image->override) {
				echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width,  $height);
				continue;
			}

			if(empty($this->popup))
				$this->popup = hikashop_get('helper.popup');
			$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
			if(empty($img->success))
				continue;

			$main_image_size = $img->width.', '.$img->height;
			if($img->external && $img->req_width && $img->req_height)
				$main_image_size = $img->req_width.', '.$img->req_height;

			$attr = $thumbnail_class.' title="'.$this->escape((string)@$image->file_description).'" onmouseover="return window.localPage.changeImage('
				. 'this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$main_image_size.', \''.str_replace(array("'", '"'),
				array("\'", '&quot;'),@$image->file_description).'\', \''.str_replace(array("'", '"'),array("\'", '&quot;'),@$image->file_name).'\', '.$key.');"';
			$html = '<img class="'.$classname.'" title="'.$this->escape((string)@$image->file_description).'" alt="'.$this->escape((string)@$image->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>
				';
			}
			if(empty($variant_name)) {
				echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'));
			} else {
				echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image_VARIANT_NAME'));
			}
		}
	}
?>
        </div>
  <div class="swiper-button-next"></div>
	</div>
<!-- EO THUMBNAILS -->

<script type="text/javascript">
  const swiper = new Swiper('.swiper', {

  // Optional parameters
  effect: "slide",
  direction: 'horizontal',
  loop: true,

  // Navigation arrows
  navigation: {
    nextEl: "hikashop_small_image_div .swiper-button-next",
	prevEl: "hikashop_small_image_div .swiper-button-prev"
  },
});
</script>