Slider for images on product page

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	4.4.0
 * @author	hikashop.com
 * @copyright	(C) 2010-2020 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?>
<div class="slideshow-container">
    <?php
    $dotscounter = 0;
    if (!empty($this->element->images) && count($this->element->images) >= 1) {
        $height = (int) $this->config->get('product_image_y');
        $width = (int) $this->config->get('product_image_x');
        foreach ($this->element->images as $image) {
            $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(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
            $dotscounter++; {
                ?>
                <div class="mySlides">
                    <img src="<?php echo $img->url; ?>">
                </div>
                <?php
            }
        }
    }
    ?>
    <a class="slide-prev" onclick="plusSlides(-1)">❮</a>
    <a class="slide-next" onclick="plusSlides(1)">❯</a>
</div>
<div class="slide-dot-control">
    <?php for ($i = 0; $i < $dotscounter; $i++) { ?>
        <span class="slide-dot" onclick="currentSlide(<?php echo $i; ?>)"></span>
    <?php } ?>
</div>

<script>
    var slideIndex = 0;
    function showSlides() {
        var slides = document.getElementsByClassName("mySlides");
        if (slideIndex > (slides.length - 1)) {
            slideIndex = 0;
        }
        if (slideIndex < 0) {
            slideIndex = (slides.length - 1);
        }
        for (var i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex].style.display = "block";
        var dots = document.getElementsByClassName("slide-dot");
        for (var i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" slide-dot-active", "");
        }
        dots[slideIndex].className += " slide-dot-active";
    }
    function plusSlides(n) {
        slideIndex += n;
        showSlides();
    }
    function currentSlide(n) {
        slideIndex = n;
        showSlides();
    }
    window.onload = showSlides;
</script>

.mySlides {
	display: none;
	height: 100%;
	font-family: Arial,Helvetica,sans-serif;
}
.mySlides img {
	width: 100%;
	height: 100%;
}
.slideshow-container {
	overflow: hidden;
	position: relative;
	margin: auto;
	width: 250px;
	height: 400px;
}
.slide-prev, .slide-next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
}
.slide-next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
.slide-prev:hover, .slide-next:hover {
	background-color: rgba(0,0,0,0.8);
}
.slide-dot-control {
	text-align: center;
	margin-top: 10px;
}
.slide-dot {
	cursor:pointer;
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.slide-dot-active, .slide-dot:hover {
	background-color: #717171;
}