Circular Slideshow 2

Circular responsive (width) slideshow.

by the_voder

HTML

<div class="slideframe">

  <div class="slidewrapper">
    <div class="slide">
      <img src="https://picsum.photos/200/200?random=1" alt="">
      <h3>Card 2</h3>
      <p>Lorem ipsum etc.</p>
    </div>
    <div class="slide">
      <img src="https://picsum.photos/200/200?random=2" alt="">
      <h3>Card 2</h3>
      <p>Lorem ipsum etc.</p>
    </div>
    <div class="slide">
      <img src="https://picsum.photos/200/200?random=3" alt="">
      <h3>Card 2</h3>
      <p>Lorem ipsum etc.</p>
    </div>
    <div class="slide">
      <img src="https://picsum.photos/200/200?random=4" alt="">
      <h3>Card 2</h3>
      <p>Lorem ipsum etc.</p>
    </div>
    <div class="slide">
      <img src="https://picsum.photos/200/200?random=5" alt="">
      <h3>Card 2</h3>
      <p>Lorem ipsum etc.</p>
    </div>
    <div class="slide">
      <img src="https://picsum.photos/200/200?random=6" alt="">
      <h3>Card 2</h3>
      <p>Lorem ipsum etc.</p>
    </div>
    <div class="slide">
      <img src="https://picsum.photos/200/200?random=7" alt="">
      <h3>Card 2</h3>
      <p>Lorem ipsum etc.</p>
    </div>
    <div class="slide">
      <img src="https://picsum.photos/200/200?random=8" alt="">
      <h3>Card 2</h3>
      <p>Lorem ipsum etc.</p>
    </div>
  </div>

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

CSS

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #eee;
  font-family: 'Lobster', cursive;
  font-size: 16px;
  line-height: 14px;
}

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

.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.15) 0%, rgba(0, 0, 0, 0) 8%);
}


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

/* Each slide */
.slide {
  position: absolute;
  top: 30px;
  width: 200px;
  height: 300px;
  background-color: #ccc;
  padding: 0;
  overflow: hidden;
  border: 4px solid #eee;
  border-radius: 10px;
  color: #444;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  transform-origin: 50% var(--circle-radius);
  transition: 1s transform;
  cursor: pointer;
}

/* Create vignette effect on image */
.slide::before {
  content: "";
  display: block;
  height: 192px;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  box-shadow: 0 0 50px 11px rgba(0, 0, 0, 0.8) inset;
}

.slide img {
  width: 100%;
}

.slide h3 {
  padding: 10px;
  font-size: 1.25em;
  line-height: 0.5rem;
}

.slide p {
  margin: 0;
  padding: 10px;
}

/* 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;
  const middleslide = Math.floor(slidecount / 2);
  // Width of slide (px)
  const slidewidth = $slides.eq(0).width();
  // Maximum rotation angle
  const maxangle = 180;
  // 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) {
      // Calculate rotation angle (degrees)
      var angle = (maxangle / slidecount) * i;
      angle += currentslide * slideangle;
      angle -= initialrotation;
      // Apple CSS transform rotation
      $(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
    if (currentslide > -(middleslide - 1))
      currentslide -= 1;
    else
      currentslide = 0;
    RotateSlides();
  });

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

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