Simple jQuery Slideshow

Basic jQuery responsive slideshow. This version uses vw units to set slideshow size, so there's no maximum width.

by the_voder

HTML

<div id="wrapper">

  <h1>Simple Responsive jQuery Slideshow</h1>

  <section>
    <div class="slideFrame">
      <div class="slideWrapper">
        <div class="slide">
          <img src="https://picsum.photos/500/500?random=1" alt="">
        </div>
        <div class="slide">
          <img src="https://picsum.photos/500/500?random=2" alt="">
        </div>
        <div class="slide">
          <img src="https://picsum.photos/500/500?random=3" alt="">
        </div>
        <div class="slide">
          <img src="https://picsum.photos/500/500?random=4" alt="">
        </div>
      </div>
      <div class="slideArrows">
        <span class="slideArrow slideArrowLeft">&lsaquo;</span>
        <span class="slideArrow slideArrowRight">&rsaquo;</span>
      </div>
    </div>
  </section>
</div>

CSS

/* Makes sure that margins and borders don't make elements expand beyong their set dimensions (may be included in any "reset" stylesheet you are using) */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #ccc;
}

h1 {
	text-align: center;
}

#wrapper {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

/* This element contains the slides and acts as a frame around them */
.slideFrame {
  --slide-count: 4;
  --visible-slides: 2;
  --slideshow-width: 80vw;
  --slideshow-height: calc((var(--slideshow-width) / var(--visible-slides) + 40px));
  --slide-width: calc(var(--slideshow-width) / var(--visible-slides));
  position: relative;
  width: var(--slideshow-width);
  height: var(--slideshow-height);
  padding: 0;
  overflow: hidden;
  margin: 0 auto;
  background-color: white;
}

/* groups slides together so they can be moved together */
.slideWrapper {
  position: absolute;
  display: flex;
  left: calc(var(--slide-width) / 2);
  padding: 0;
  transition: all 0.5s;
}

/* Style for each slide */
.slide {
  /* Width determines how many slides are shown at a time */
  width: var(--slide-width);
  margin: 0;
}

/* Style for slide images */
.slide img {
  width: var(--slide-width);
  width: 80%;
  margin: 10%;
}

.slideArrows {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
}

.slideArrow {
	margin: 0 50px;
  cursor: pointer;
  font-size: 60px;
  color: black;

}

.slideArrow:hover {
  color: blue;

}

JavaScript

$(document).ready(function() {

  // Slideshow wrapper element
  const $slideWrapper = $('.slideWrapper');

  // Number of slides
  const slideCount = $(".slideWrapper > *").length;

  // Width of slide
  let slideWidth = $slideWrapper.children('div').first().width();

  // Index of current slide (first slide is 0)
  let currentSlide = 0;

  // Shift slides
  function moveSlides() {
    var shiftAmt = currentSlide * slideWidth + "px";
    $slideWrapper.css("transform", "translateX(-" + shiftAmt + ")");
  }

  // Bind to left arrow
  $('.slideArrowLeft').on('click', function(el) {
    // Decrement current slide index
    if (currentSlide > 0) {
      currentSlide -= 1;
      moveSlides();
    }
  });

  // Bind to right arrow
  $('.slideArrowRight').on('click', function(el) {
    // Increment current slide index
    if (currentSlide < (slideCount - 1)) {
      currentSlide += 1;
      moveSlides();
    }
  });

  // Bind to window resize
  $(window).resize(function() {
    // Recalculate slide-width
    slideWidth = $slideWrapper.children('div').first().width();
  });

});