Animated & Automatic Slideshow HTML CSS JQuery

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

header {
  background: linear-gradient(72deg, #3debb0 1%, #8956f3 99%);
  padding: 1px 0;
  margin: 0
}

main {
  background: linear-gradient(72deg, #7bffd2 1%, #db9ef6 99%);
  margin: 20px auto 0;
  width: 100%;
  max-width: 750px;
  padding: 0;
  background-color: #2c7463;
  border-radius: 3px;
  text-align: center;
  font-size: 18px
}

main p {
  padding: 10px 20px 30px
}

.content {
  margin: 0 auto;
  max-width: 750px
}

h1 {
  display: block;
  font-size: 27px;
  padding: 0;
  text-align: center;
  color: #fff
}

h2 {
  margin: 0;
  display: block;
  padding: 20px 0 0
}

p {
  line-height: 1.5;
  color: #4e4e4e;
  text-align: justify
}

.section {
  max-width: 750px;
  margin: 0 auto;
  display: block
}

@media (max-width:800px) {
  body {
    font-size: 16px
  }

.content {
    max-width: 500px
  }

.content h2 {
    padding: 0
  }

main {
    max-width: 500px;
    font-size: 17px
  }
}
</style>
</head>
<body>

<header>
    <h1>SITE TITLE</h1>
  </header>

<div id="diaporama">
  <div><a href="#"><img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/superbike.jpg.webp" /></a>
    <p><a href="#">Amazing Superbike Speed and Acceleration</a></p>
  </div>
  <div><a href="#"><img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/motocross.jpg.webp" /></a>
    <p><a href="#">The Most Amazing MotoCross in The Sky</a></p>
  </div>
  <div><a href="#"><img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/akal.jpg.webp" /></a>
    <p><a href="#">Lorem Ipsum is simply dummy text</a></p>
  </div>
  <div><a href="#"><img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/p1.jpg.webp" /></a>
    <p><a href="#">The World's Best and Fantastic Scenery</a></p>
  </div>
  <div><a href="#"><img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/yellow.jpg.webp" /></a>
    <p><a href="#">The Most Amazing Places In The World Full of Color</a></p>
  </div>
</div>

</section>

<main>
    <h2>Animated & Automatic Slideshow</h2>
    <p>Click RUN button after Resize the screen to Refresh Preview.</p>
  </main>

<p>Source Code: <a rel="noreferrer" href="https://github.com/vporel/mixSlide" target="_blank">Github.</a></p>

<h2>What is Lorem Ipsum?</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</body>
</html>

/* CSS Source Code */
:root {
  --thumb-size: 30px;
}

#diaporama {
  margin: 20px 0
}

.mixSlide-frame.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  background: rgba(0, 0, 0, .7);
  width: 100% !important;
  height: 100% !important;
}

#mixSlide-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  max-height: 420px;
}

.mixSlide-frame.fullscreen #mixSlide-container {
  position: absolute !important;
  background: transparent;
  height: 100%;
  max-height: 95%;
}

.mixSlide-frame.fullscreen #mixSlide-images > div {
  max-height: 92%;
}

#mixSlide-container .top,
#mixSlide-container .left,
#mixSlide-container .top-left {
  left: 0 !important;
  top: 0 !important;
}

#mixSlide-container .bottom,
#mixSlide-container .bottom-left {
  bottom: 5px !important;
}

#mixSlide-container .top-right,
#mixSlide-container .right {
  top: 0 !important;
  right: 0 !important;
}

#mixSlide-container .bottom-right {
  bottom: 0 !important;
  right: 0 !important;
}

#mixSlide-images {
  width: 100%;
  height: 100%;
}

#mixSlide-images>div {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 380px;
  overflow: hidden;
}

#mixSlide-images>div img {
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

#mixSlide-images>div p a {
  position: absolute;
  z-index: 3;
  background: rgba(0, 0, 0, .4);
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  font-size: 18px;
  font-family: arial;
  color: #fff;
  text-shadow: 1px 1px black;
  bottom: 0;
  text-decoration: none;
}
#mixSlide-images>div p a:hover {
  color: #6ff1ff;
}
#mixSlide-images>div p a.right,
#mixSlide-images>div p a.bottom-right {
  text-align: right;
}

#mixSlide-controls {
  position: absolute;
  z-index: 5;
  color: white;
  right: 0;
  font-size: 18px;
  width: 100%;
}

#mixSlide-slide-buttons {
  width: auto;
  float: right;
  margin: 10px;
  justify-content: space-around;
}

#mixSlide-slide-buttons span {
  padding: 5px 10px;
  background: rgba(0, 0, 0, .5);
  text-align: center;
  cursor: pointer;
  display: inline-block;
  transition: all .2s ease;
  color: darkgray;
}

#mixSlide-start-slide {
  background: black !important;
}

#mixSlide-slide-buttons span:hover {
  background: rgba(0, 0, 0, .8);
  color: white;
}

#mixSlide-points {
  display: flex;
  margin-left: 30px;
  margin-top: 25px;
  padding: 2px;
}

#mixSlide-points span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 4px;
  background: rgb(230, 230, 230);
  box-shadow: 1px 1px 2px black;
  transition: all .5s ease;
}

#mixSlide-points span.active,
#mixSlide-points span:hover {
  background: rgb(30, 30, 30);
  box-shadow: 1px 1px 2px white;
}

#mixSlide-thumbs {
  position: absolute;
  overflow: hidden;
  padding: 0;
  z-index: 5;
  margin: 0 auto;
  display: block;
  text-align: center;
}

#mixSlide-thumbs.bottom,
#mixSlide-thumbs.top {
  height: var(--thumb-size);
  width: 95%;
}

#mixSlide-thumbs.left,
#mixSlide-thumbs.right {
  width: var(--thumb-size);
  height: 95%;
}

#mixSlide-thumbs span {
  overflow: hidden;
  cursor: pointer;
  transition: all .5s ease;
  display: inline-block;
}

#mixSlide-thumbs.bottom span,
#mixSlide-thumbs.top span {
  height: 100%;
  width: var(--thumb-size);
  margin-left: 5px;
}

#mixSlide-thumbs.left span,
#mixSlide-thumbs.right span {
  width: 100%;
  height: var(--thumb-size);
  margin-top: 5px;
}

#mixSlide-thumbs span:hover,
#mixSlide-thumbs span.active {
  transform: scale(1.1);
  border-radius: 50%;
}

#mixSlide-thumbs img {
  height: 100%;
}

/* Animation elements */.mixSlide-div-clip {
  margin: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  position: absolute;
}

@media (max-width:550px){
#mixSlide-container {
  max-height: 360px;
}
#mixSlide-images>div {
  max-height: 320px;
}
}

@media (max-width:460px){
#mixSlide-container {
  max-height: 310px;
}
#mixSlide-images>div {
  max-height: 260px;
}
}

@media (max-width:380px){
#mixSlide-container {
  max-height: 260px;
}
#mixSlide-images>div {
  max-height: 210px;
}

// Script or Javascript Source Code
//Plug-in varants
var MXS_BOTTOM_POS = "bottom",
MXS_TOP_POS = "top",
MXS_LEFT_POS = "left",
MXS_RIGHT_POS = "right",
MXS_CENTER_POS = "center",
MXS_TOP_LEFT_POS = "top-left",
MXS_TOP_RIGHT_POS = "top-right",
MXS_BOTTOM_LEFT_POS = "bottom-left",
MXS_BOTTOM_RIGHT_POS = "bottom-right";
var MXS_FOUR_POSITION = [MXS_TOP_POS, MXS_RIGHT_POS, MXS_BOTTOM_POS, MXS_LEFT_POS];
MXS_ORIGINS_POSITIONS = [MXS_TOP_LEFT_POS, MXS_TOP_RIGHT_POS, MXS_CENTER_POS, MXS_BOTTOM_LEFT_POS, MXS_BOTTOM_RIGHT_POS];
var MXS_FORWARD = "forward",
MXS_BACKWARD = "backward";
var MXS_VERTICAL_DIR = "vertical",
MXS_HORIZONTAL_DIR = "horizontal",
MXS_SKEW_1_DIR = "skew1";
MXS_SKEW_2_DIR = "skew2";
var MXS_SIMPLE_DIRECTIONS = [MXS_VERTICAL_DIR, MXS_HORIZONTAL_DIR],
MXS_ALL_DIRECTIONS = [MXS_VERTICAL_DIR, MXS_HORIZONTAL_DIR, MXS_SKEW_1_DIR, MXS_SKEW_2_DIR];
var MXS_CONTROLS_PREV_CODE = "❮",
MXS_CONTROLS_NEXT_CODE = "❯",
MXS_CONTROLS_PAUSE_CODE = "⏸",
MXS_CONTROLS_PLAY_CODE = "▶",
MXS_CONTROLS_CLOSE_CODE = "✖";
MXS_CONTROLS_SQUARE_CODE = "⬚";

// Transitions
var MXS_SIMPLE_TRANSITION = "simple", MXS_CUTTING_TRANSITION = "cutting", MXS_SHAPE_TRANSITION = "shape";
var MXS_RANDOM = {
name : "random",
varant : false
},
MXS_FADE = {
name : "fade",
type : MXS_SIMPLE_TRANSITION
},
MXS_SLIDE = {
name : "slide",
type : MXS_SIMPLE_TRANSITION,
direction : MXS_HORIZONTAL_DIR
},
MXS_SLICES = {
name : "slices",
type : MXS_CUTTING_TRANSITION,
direction : MXS_HORIZONTAL_DIR,
count : 4
},
MXS_TILES = {
name : "tiles",
type : MXS_CUTTING_TRANSITION,
count : 16,
random : false
},
MXS_CIRCLE = {
name : "circle",
type : MXS_SHAPE_TRANSITION,
origin : "center"
},
MXS_SQUARE = {
name : "square",
type : MXS_SHAPE_TRANSITION,
origin : "center"
};
var MXS_TRANSITIONS = [MXS_FADE, MXS_SLIDE, MXS_SLICES, MXS_TILES, MXS_CIRCLE, MXS_SQUARE];
function getTransition(name){
let transition = null;
for (var i = 0; (i < MXS_TRANSITIONS.length && MXS_TRANSITIONS[i].name != name); i++);
if(i < MXS_TRANSITIONS.length)
transition = MXS_TRANSITIONS[i];
return transition;
}
function chooseTransition(){
let transition = MXS_TRANSITIONS[Math.round(Math.random() * (MXS_TRANSITIONS.length-1))];
if(transition.type == MXS_SHAPE_TRANSITION){
transition.origin = MXS_ORIGINS_POSITIONS[Math.round(Math.random() * (MXS_ORIGINS_POSITIONS.length-1))];
}else if(transition.name == MXS_TILES.name){
transition.random = (Math.round(Math.random()) == 0) ? false : true;
}else if(transition.name == MXS_SLICES.name || transition.name == MXS_SLIDE.name){
transition.direction = MXS_SIMPLE_DIRECTIONS[Math.round(Math.random())];
}
return transition;
}

(function($){
$.fn.mixSlide = function(opt){

let defaults = {
fullscreen:false,
animation:{
speed:1,
delay:3
},
transition : {
name : "fade"
},
autoplay : true,
controls : {
active :false,
position : MXS_TOP_POS
},
thumbs : {
active : false,
position : MXS_BOTTOM_POS
},
labels:{
active:true,
position:MXS_TOP_LEFT_POS
}
};

$container.append('<div id="mixSlide-controls" class="'+options.controls.position+'"></div>');
let $controls = $container.find("#mixSlide-controls");

//Controls buttons
if(options.controls){
let controls_code = '\
<div id="mixSlide-slide-buttons">\
<span id="mixSlide-prev">'+MXS_CONTROLS_PREV_CODE+'</span>\
<span id="mixSlide-next">'+MXS_CONTROLS_NEXT_CODE+'</span>\
<span id="mixSlide-start-slide">'+MXS_CONTROLS_PLAY_CODE+'</span>\
<span id="mixSlide-open-close-fullscreen">'+MXS_CONTROLS_SQUARE_CODE+'</span>\
</div>';
$controls.append(controls_code);
if($obj.mixSlideData('animated'))
$controls.find('#mixSlide-start-slide').html(MXS_CONTROLS_PAUSE_CODE);
if(options.fullscreen){
$controls.find('#mixSlide-open-close-fullscreen').html(MXS_CONTROLS_CLOSE_CODE);
}
if(!options.thumbs.active){
let points_code = '<div id="mixSlide-points">';
for(let i = 0; i < images.length; i++){
points_code += '<span class="mixSlide-point"data-image-index="'+i+'"></span>';
}
points_code += "</div>";
$controls.append(points_code);
$controls.find('#mixSlide-points span').click(function(){
let indexImage = parseInt($(this).attr('data-image-index'));
if(indexImage > currentImageIndex)
changeImage(MXS_FORWARD, indexImage);
else if(indexImage < currentImageIndex)
changeImage(MXS_BACKWARD, indexImage);
});
}
$controls.find('#mixSlide-prev').click(function(){changeImage(MXS_BACKWARD);});
$controls.find('#mixSlide-next').click(function(){changeImage(MXS_FORWARD);});
$controls.find('#mixSlide-start-slide').click(function(){
if($obj.mixSlideData('animated')){
stopAnimation();
$(this).html(MXS_CONTROLS_PLAY_CODE);
}else{
launchAnimation();
$(this).html(MXS_CONTROLS_PAUSE_CODE);
}
});
$controls.find('#mixSlide-open-close-fullscreen').click(function(){
if($obj.mixSlideData('fullscreen')){
$obj.mixSlideData('fullscreen', false);
$(this).html(MXS_CONTROLS_SQUARE_CODE);
}else{
$obj.mixSlideData('fullscreen', true);
$(this).html(MXS_CONTROLS_CLOSE_CODE);
}
});
}

if(dir == MXS_FORWARD){
$imageDivs.eq(nextTemp).css("z-index", "1").show(-1);
$imageDivs.eq(currentTemp).hide(-1).css("z-index", "0");
if(number%2 == 0){
$(this).animate(animated_even_forward, options.animation.speed);
}else{
$(this).animate(animated_odd_forward, options.animation.speed);
}
}else{
if(number%2 == 0){
$(this).css(animated_even_forward);
$(this).animate(animated_backward, options.animation.speed);
}else{
$(this).css(animated_odd_forward);
$(this).animate(animated_backward, options.animation.speed, function(){
$imageDivs.eq(currentTemp).css({"z-index":"0"}).hide(-1);
$imageDivs.eq(nextTemp).css({"z-index":"1"}).show(-1);
});
}
}
});
}
//Tiles transition
else if(transition.name == MXS_TILES.name)
{
let animated_forward = {}, 
animated_backward = {left:"0", top:"0"},
sqrt_count = Math.sqrt(transition.count);
let k = 0;
for(let i = 0;i<sqrt_count;i++){
for(let j = 0;j<sqrt_count;j++){
$divOver.append('\
<div class="mixSlide-div-clip slice '+options.transition.direction+'" data-number="'+k+'" data-x="'+i+'" data-y="'+j+'">\
<img src="'+images[imageIndex].src+'"/>\
</div>'
);
k++;
}
}
let size = 100/sqrt_count;
$divOver.find('div').each(function(){
let x = parseInt($(this).attr('data-x')),
y = parseInt($(this).attr('data-y'));
clipSquare($(this), x*size, y*size, size)
});
let unitSpeed = options.animation.speed/transition.count;
//Animation width random order
if(transition.random)
{
let number = 0, $element,  x, y, distance_left, distance_top, elements_numbers = [];//Couples' elements (x&y)
let element_number;
do{
do{
element_number = Math.floor(Math.random()*transition.count);
}while(elements_numbers.indexOf(element_number) != -1);
elements_numbers.push(element_number);
let $element = $divOver.find('div[data-number="'+element_number+'"]');
animated_forward.left = (Math.floor(Math.random()*2) == 0) ? '-100%' : '100%';
animated_forward.top = (Math.floor(Math.random()*2) == 0) ? '-100%' : '100%';
if(dir == MXS_FORWARD){
$imageDivs.eq(nextTemp).css("z-index", "1").show(-1);
$imageDivs.eq(currentTemp).hide(-1).css("z-index", "0");
$element.animate(animated_forward, unitSpeed*(number+1));
}else{
$element.css(animated_forward);
if(number == transition.count-1){
$element.animate(animated_backward, unitSpeed*(number+1), function(){
$imageDivs.eq(currentTemp).css({"z-index":"0"}).hide(-1);
$imageDivs.eq(nextTemp).css({"z-index":"1"}).show(-1);
});
}else{
$element.animate(animated_backward, unitSpeed*(number+1));
}
}
number++;
}while(number < transition.count);
}
//Animation with defined order
else
{ 
let number = 0, $element;
if(dir == MXS_FORWARD){
$imageDivs.eq(nextTemp).css("z-index", "1").show(-1);
$imageDivs.eq(currentTemp).hide(-1).css("z-index", "0");
}
animated_forward.left = (Math.floor(Math.random()*2) == 0) ? '-100%' : '100%';
animated_forward.top = (Math.floor(Math.random()*2) == 0) ? '-100%' : '100%';
for(let i = 0;i<sqrt_count;i++){
for(let j = 0;j<sqrt_count;j++){
$element = $divOver.find('div[data-x="'+i+'"][data-y="'+j+'"]');
if(dir == MXS_FORWARD){
$imageDivs.eq(nextTemp).css("z-index", "1").show(-1);
$imageDivs.eq(currentTemp).hide(-1).css("z-index", "0");
$element.animate(animated_forward, unitSpeed*(number+1));
}else{
$element.css(animated_forward);
if(number == transition.count-1){
$element.animate(animated_backward, unitSpeed*(number+1), function(){
$imageDivs.eq(currentTemp).css({"z-index":"0"}).hide(-1);
$imageDivs.eq(nextTemp).css({"z-index":"1"}).show(-1);
});
}else{
$element.animate(animated_backward, unitSpeed*(number+1));
}
}
number++;
}
}
}
}
}
//Shape transition
else if(transition.type == MXS_SHAPE_TRANSITION)
{
let origin,  x = 50, y = 50, radius = 70;
if(transition.origin != MXS_CENTER_POS)
if(transition.name == MXS_CIRCLE.name)
radius = 150;
else
radius = 100;
switch(transition.origin){
case MXS_TOP_LEFT_POS: x = 0, y = 0;break;
case MXS_TOP_RIGHT_POS: x = 100, y =  0;break;
case MXS_BOTTOM_LEFT_POS: x = 0, y =  100;break;
case MXS_BOTTOM_RIGHT_POS: x = 100, y = 100;break;
}
origin = x+"% "+y+"%";
//Circle transition
if(transition.name == MXS_CIRCLE.name)
{

if(dir == MXS_FORWARD){
$imageDivs.eq(nextTemp).css({"clip-path":"circle(0% at "+origin+")", "z-index":"1"}).show(-1);
$imageDivs.eq(currentTemp).css({"z-index":"0"});
$imageDivs.eq(nextTemp).animate(
{step:radius},
{
duration:options.animation.speed,
step:function(val){
$imageDivs.eq(nextTemp).css({"clip-path":"circle("+val+"% at "+origin+")"});
},
always : function(){
$imageDivs.eq(currentTemp).hide(-1);
$imageDivs.eq(nextTemp).css({"clip-path":"none"}).animate({step:0},0);
}
}
);
}else{
$imageDivs.eq(nextTemp).css({"z-index":"0"}).show(-1);
$imageDivs.eq(currentTemp).css('clip-path', 'circle('+radius+'% at '+origin+')')
$imageDivs.eq(currentTemp).animate(
{step:radius},
{
duration:options.animation.speed,
step:function(val){
$imageDivs.eq(currentTemp).css({"clip-path":"circle("+(radius-val)+"% at "+origin+")"});
},
always:function(){
$imageDivs.eq(nextTemp).css("z-index", "1");
$imageDivs.eq(currentTemp).css({"clip-path":"none","z-index":"0"}).hide(-1).animate({step:0},0);

}
}
);
}
}
//Square transition
else if(transition.name == MXS_SQUARE.name)
{
let x_m, x_p, y_m, y_p;
if(dir == MXS_FORWARD){
$imageDivs.eq(nextTemp).css({
"clip-path":"polygon("+x+"% "+y+"%, "+x+"% "+y+"%, "+x+"% "+y+"%, "+x+"% "+y+"%)",
"z-index":"1"
}).show(-1);
$imageDivs.eq(currentTemp).css({"z-index":"0"});
$imageDivs.eq(nextTemp).animate(
{step:radius},
{
duration:options.animation.speed,
step:function(val){
x_m = x-val, x_p = x+val, y_m = y-val, y_p = y+val;
$imageDivs.eq(nextTemp).css({"clip-path":"polygon("+x_m+"% "+y_m+"%, "+x_p+"% "+y_m+"%, "+x_p+"% "+y_p+"%, "+x_m+"% "+y_p+"%)"});
},
always : function(){
$imageDivs.eq(currentTemp).hide(-1);
$imageDivs.eq(nextTemp).css({"clip-path":"none"}).animate({step:0},0);
}
}
);
}else{
$imageDivs.eq(nextTemp).css({"z-index":"0"}).show(-1);
x_m = x-radius, x_p = x+radius, y_m = y-radius, y_p = y+radius;
$imageDivs.eq(currentTemp).css('clip-path',"polygon("+x_m+"% "+y_m+"%, "+x_p+"% "+y_m+"%, "+x_p+"% "+y_p+"%, "+x_m+"% "+y_p+"%)");
$imageDivs.eq(currentTemp).animate(
{step:radius},
{
duration:options.animation.speed,
step:function(val){
x_m = x-(radius-val), x_p = x+(radius-val), y_m = y-(radius-val), y_p = y+(radius-val);
$imageDivs.eq(currentTemp).css({"clip-path":"polygon("+x_m+"% "+y_m+"%, "+x_p+"% "+y_m+"%, "+x_p+"% "+y_p+"%, "+x_m+"% "+y_p+"%)"});
},
always:function(){
$imageDivs.eq(nextTemp).css("z-index", "1");
$imageDivs.eq(currentTemp).css({"clip-path":"none","z-index":"0"}).hide(-1).animate({step:0},0);

}
}
);
}
}
}
currentImageIndex = nextImageIndex;
refresh();
}
function refresh(){
$controls.find('#mixSlide-points span').removeClass('active');
$container.find('#mixSlide-points span').eq(currentImageIndex).addClass('active');
$container.find('#mixSlide-thumbs span').removeClass('active');
$container.find('#mixSlide-thumbs span').eq(currentImageIndex).addClass('active');
}
refresh();
function animation(){
changeImage(MXS_FORWARD, -1, true);
}
function launchAnimation(){
timer = setInterval(animation, options.animation.delay+options.animation.speed);
$obj.mixSlideData('animated', true);
}
function stopAnimation(){
clearInterval(timer);
$obj.mixSlideData('animated', false);
}
if(options.autoplay)
launchAnimation();
});
return this;
}

function clipSquare($element, x, y, width, height = null){
if (height == null)
height = width;
let P1 = x+"% "+y+"%",
P2 = (x+width)+"% "+y+"%",
P3 = (x+width)+"% "+(y+height)+"%",
P4 = x+"% "+(y+height)+"%";
$element.css('clip-path', 'polygon('+P1+', '+P2+', '+P3+', '+P4+')');
}

$.fn.mixSlideData = function(datum, val = null){
let $obj = $(this);
if(val == null){
return $obj.data("mixSlide-options")[datum];
}else{
if(typeof datum == "string"){
let mixSlide_options = $obj.data("mixSlide-options");
mixSlide_options[datum] = val;
if(datum == "fullscreen"){
if(val){
$obj.addClass('fullscreen');
}else{
$obj.removeClass('fullscreen');
}
}
$obj.data("mixSlide-options", mixSlide_options);
}else{
console.log("Error (mixSlideData : the datum must be a string");
}
return this;
}
}
})(jQuery);

This is Animated & Automatic Slideshow HTML CSS JQuery. Complete preview with syntax highlighting of html, css, js or javascript source code.