<div class="product-slider">
  <div class="slider-box">
    <div class="slider">
      <div class="slide"><a href="/"><img src="https://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/slider-pro/images/image1_medium.jpg" alt=""></a></div>
      <div class="slide"><a href="/"><img src="https://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/slider-pro/images/image2_medium.jpg" alt=""></a></div>
      <div class="slide"><a href="/"><img src="https://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/slider-pro/images/image3_medium.jpg" alt=""></a></div>
      <div class="slide"><a href="/"><img src="https://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/slider-pro/images/image4_medium.jpg" alt=""></a></div>
      <div class="slide"><a href="/"><img src="https://pcvector.net/uploads/demo/scripts/slideshow_and_scroller/slider-pro/images/image5_medium.jpg" alt=""></a></div>
    </div>
  </div>
</div>
.slider-box {
  display: flex;
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
}
.slider {
  display: flex;
}
.slide {
  width: 600px;
}
.slide img {
  width: 100%;
  height: auto;
}
class Slider {
  constructor(slider) {
    this.currentImg = 0;
    this.speed = 500;
    
    this.swipeStatus = this.swipeStatus.bind(this);
    this.keyboardHandler = this.keyboardHandler.bind(this);
    this.scrollImages = this.scrollImages.bind(this);
    
    this.previousImage = this.previousImage.bind(this);
    this.nextImage = this.nextImage.bind(this);
    
    this.sliderWrapper = $(slider);
    this.slider = this.sliderWrapper.find('.slider');
    this.sliderBox = this.sliderWrapper.find('.slider-box');

    this.sliderWrapper
      .find('.slider-box')
      .attr("tabIndex", 0)
      .on("blur focus click", this.keyboardHandler)
      .swipe({
        triggerOnTouchEnd: true,
        triggerOnTouchLeave: true,
        swipeStatus: this.swipeStatus,
        allowPageScroll: "vertical",
        threshold: 75
      });
    this.maxImages = this.slider.find(">*").length;
    this.visibleImages = this.sliderBox.width() / this.slider.find(".slide").width();
    this.imagesOut = ( this.maxImages - this.sliderBox.width() / ( this.slider.find(".slide").width() ) );

    if ( 0 > this.imagesOut ) {
        this.sliderBox.append('<div class="slider-btn slider-previous-btn"></div><div class="slider-btn slider-next-btn"></div>');
    }

    this.prevBtn = this.sliderWrapper.find(".slider-previous-btn");
    this.nextBtn = this.sliderWrapper.find(".slider-next-btn");
    
    this.prevBtn.on("click", this.previousImage);
    this.nextBtn.on("click", this.nextImage);
  }
    keyboardHandler(event) {
        if (event.type === "focus") {
            document.addEventListener("keydown", this.keyboardHandler);
            this.constructor.activeInstance = this;
        } else if (event.type === "blur") {
            document.removeEventListener("keydown", this.keyboardHandler);
            this.constructor.activeInstance = null;
        } else if (event.type === "keydown") {
            if (event.keyCode === 37) this.previousImage();
            if (event.keyCode === 39) this.nextImage();
        } else {
            this.sliderBox.focus();
        }

        return true;
    }
  
  
  swipeStatus(event, phase, direction, distance) {
    //If we are moving before swipe, and we are going L or R in X mode, or U or D in Y mode then drag.
    if (phase == "move" && (direction == "left" || direction == "right")) {
      var duration = 0;

      if (direction == "left") {
        this.scrollImages(
          this.currentImg + 0.0025 * distance,
          duration
        );
      } else if (direction == "right") {
        this.scrollImages(
          this.currentImg - 0.0025 * distance,
          duration
        );
      }
    } else if (phase == "cancel") {
      this.scrollImages(this.currentImg, this.speed);
    } else if (phase == "end") {
      if (direction == "right") {
        this.previousImage();
      } else if (direction == "left") {
        this.nextImage();
      }
    }
  }
  
  scrollImages(distance, duration) {
        this.slider.css("transition-duration", (duration / 1000).toFixed(1) + "s");
        this.slider.css("transform", "translate(" + (100 * -distance / this.maxImages) + "%,0)");
    }

  previousImage() {
    if (this.currentImg != '0') {
        this.currentImg = Math.max(this.currentImg - 1, 0);
        this.scrollImages(this.currentImg, this.speed);
    } else {
        this.currentImg = this.maxImages - 1;
        this.scrollImages(this.currentImg, this.speed);
    }
  }

  nextImage() {
    if (this.currentImg != this.maxImages - 1) {
        this.currentImg = Math.min(this.currentImg + 1, this.maxImages - 1);
        this.scrollImages(this.currentImg, this.speed);
    } else {
        this.currentImg = 0;
        this.scrollImages(this.currentImg, this.speed);
    }
  }
}

$(() => {
  for (const element of $(".product-slider")) {
    new Slider(element);
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js