Rotating Slider jQuery Plugin

A rotating slider with controls use circle ckip-path. Note, because Internet Explorer/Edge do not support the Clip-path property, this will not work in those browsers.

github here

step1:
link rotating-slider.css , jquery and rotating-slider.js

step2:
html

html

Build the DOM : .rotating-slider>ul.slides>li>.inner

step3:
css

Give 6 slides different colors or backgrounds.

step4:
jq

Select the rotating-slider and apply the roatingSlider plugin. Set the attribute such as height, width and speed and so on.

The default attributes below,change as you wish.

$('.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(){}
});

the durection control explains: