Circular Slideshow

Circular responsive (width) slideshow.

by the_voder

HTML

<div class="slideframe">

  <div class="slidewrapper">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>

</div>
<div class="slidearrows">
  <span class="slidearrow slidearrowleft">&lsaquo;</span>
  <span class="slidearrow slidearrowright">&rsaquo;</span>
</div>

CSS

body {
  background-color: #eee;
}

/* Frame around slideshow */
.slideframe {
  --circle-radius: 800px;
  position: relative;
  width: 100%;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
}

.slideframe::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 8%);
  background-repeat: no-repeat;
}

/* Wraps slides */
.slidewrapper {
  position: absolute;
  width: 100%;
  height: 800px;
  margin: 0 auto;
  overflow: hidden;
}

/* Each slide */
.slide {
  cursor: pointer;
  position: absolute;
  top: 30px;
  width: 200px;
  height: 300px;
  background-color: red;
  z-index: 3;
  transform-origin: 50% var(--circle-radius);
  transition: 1s transform;
}

/* Slide left/right arrows */
.slidearrows {
  position: relative;
  width: 100%;
  text-align: center;
  bottom: 0;
}

.slidearrow {
  margin: 0 50px;
  cursor: pointer;
  font-size: 80px;
  color: black;

}

.slidearrow:hover {
  color: blue;

}

JavaScript

$(document).ready(function() {

  ////////////////
  // VARAIABLES //
  ////////////////

  // Slide selector string
  const slidewrapperselector = '.slidewrapper';
  // Slide wrapper (jQuery object)
  const $slidewrapper = $(slidewrapperselector);
  // Slides (jQuery collection)
  const $slides = $(slidewrapperselector + ' > *');
  // Count of slides
  const slidecount = $($slides).length;
  // Width of slide (px)
  const slidewidth = $slides.eq(0).width();
  // Maximum rotation angle
  const maxangle = 360;
  // Current slide index
  let currentslide = 0;//Math.round(slidecount / 2);
  // Rotation angle per-slide
  let slideangle = maxangle / slidecount;
  let initialrotation = (360 - maxangle) / 2;

  ///////////////
  // FUNCTIONS //
  ///////////////

  // Slide-rotation function
  function RotateSlides() {
    $slides.each(function(i) {
      var angle = (maxangle / slidecount) * i;
      angle += currentslide * slideangle;
	  angle -= initialrotation;
      $(this).css("transform", "rotate(" + angle + "deg)");
    });
  }

  // Calculate and apply slide left-offset
  function CalculateLeftOffset() {
    var offset = ($slidewrapper.width() / 2) - (slidewidth / 2);
    $slides.css("left", offset);
  }

  //////////////
  // BINDINGS //
  //////////////

  // Bind to left arrow
  $('.slidearrowleft').on('click', function() {
    // Increment current slide index
    currentslide -= 1;
    RotateSlides();
  });

  // Bind to right arrow
  $('.slidearrowright').on('click', function() {
    // Decrement current slide index
    currentslide += 1;
    RotateSlides();
  });

  // Bind to window resize
  $(window).resize(function() {
    // Recalculate slide left offset
    CalculateLeftOffset();
  });

  //////////////////
  // INITAL SETUP //
  //////////////////

  // Apply left-ofset to slides
  CalculateLeftOffset();

  // Apply initial slide rotation
  RotateSlides();

});