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; }