A rotating slider that uses the Clip-path property to create a circular shape. Note, because Internet Explorer/Edge do not support the Clip-path property, this will not work in those browsers. Demo at https://codepen.io/tylernj42/full/vWdRxv/

The basic HTML markup requires a container with the .rotating-slider class, a child ul element with the .slides class, and at least two children li elements.

<div class="rotating-slider">
  <ul class="slides">
    <li>
      <p>Slide 1</p>
    </li>
    <li>
      <p>Slide 2</p>
    </li>
  </ul>
</div>

The Rotating Slider is initialized by calling the rotatingSlider method like so: $('.rotating-slider').rotatingSlider(). This method accepts a number of options, the defaults are below.

$('.rotating-slider').rotatingSlider({
    autoRotate: true,
    autoRotateInterval: 6000,
    draggable: true,
    directionControls: true,
    directionLeftText: '‹',
    directionRightText: '›',
    rotationSpeed: 750,
    slideHeight: 360,
    slideWidth: 480,
    /* Callback Functions */
    beforeRotationStart: function(){},
    afterRotationStart: function(){},
    beforeRotationEnd: function(){},
    afterRotationEnd: function(){}
});

Note that the slideWidth and slideHeight properties do not define the size of the overall slider, but instead define the size of the content area inside the slide. The plugin will use these measurements to calculate an arc shape to create the illusion of a circular slider, and padding will be added to the slide to fit this shape.