Wipe Slider

Developer
Tcmulder
Size
3,603 Kb
Views
56,672
  1. Wipe Slider Previews
  2. Wipe Slider HTML Codes
  3. Wipe Slider CSS Codes
  4. Wipe Slider JS Codes

How do I make an wipe slider?

I'm essentially trying to create a rotating slider wipe effect using background-size:cover and background-position:center.. What is a wipe slider? How do you make a wipe slider? This script and codes were developed by Tcmulder on 05 August 2022, Friday.

Wipe Slider Previews
IQ Test

Wipe Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wipe Slider</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cover-slider__wrap"> <div class="cover-slider__inner"> I'm essentially trying to create a rotating slider wipe effect using background-size:cover and background-position:center. </div> <ul class="cover-slider"> <li class="cover-slider__slide"> <span class="hide">Alt Tag</span> </li> <li class="cover-slider__slide"> <span class="hide">Alt Tag</span> </li> <li class="cover-slider__slide"> <span class="hide">Alt Tag</span> </li> <li class="cover-slider__slide"> <span class="hide">Alt Tag</span> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wipe Slider - Script Codes CSS Codes

.cover-slider__wrap { position: relative; max-width: 640px; height: 480px; margin: 2em auto; padding: 5em 1em; color: #fff; line-height: 2; font-family: 'Trebuchet MS', sans-serif; font-weight: bold; box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}
.cover-slider__inner { position: relative; min-height: 40em; text-align: center; z-index: 10;
}
.cover-slider { -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cover-slider__slide { position: absolute; top: 0; bottom: 0; left: 0; right: 100%; padding: 0; margin: 0; background-size: cover; background-position: center; list-style: none; z-index: 0; opacity: .5;
}
.cover-slider__slide.active { -webkit-animation-duration: 2500ms; animation-duration: 2500ms; -webkit-animation-name: slidein; animation-name: slidein; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.cover-slider__slide.inactive { -webkit-animation-duration: 2500ms; animation-duration: 2500ms; -webkit-animation-name: slideout; animation-name: slideout; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes slidein { from { left: 0; right: 100%; } to { left: 0; right: 0; }
}
@keyframes slidein { from { left: 0; right: 100%; } to { left: 0; right: 0; }
}
@-webkit-keyframes slideout { from { left: 0; right: 0; } to { left: 100%; right: 0; }
}
@keyframes slideout { from { left: 0; right: 0; } to { left: 100%; right: 0; }
}
.cover-slider__slide:nth-child(1) { background-image: url("https://unsplash.it/640/480");
}
.cover-slider__slide:nth-child(2) { background-image: url("https://unsplash.it/641/480");
}
.cover-slider__slide:nth-child(3) { background-image: url("https://unsplash.it/641/481");
}
.cover-slider__slide:nth-child(4) { background-image: url("https://unsplash.it/643/482");
}
body { background: teal; box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
.hide { position: absolute; left: -9999px;
}

Wipe Slider - Script Codes JS Codes

// when the dom is ready
jQuery(function($){	// grab each slider (multiple supported)	$('.cover-slider').each(function(){	// find the slides in this slider	var $slides = $(this).find('.cover-slider__slide');	// get the 0 based amount of slides var numSlides = $slides.length - 1;	// incrementor var i = 0; // rotate slides	var rotate = function(){ // remove all sliding classes $slides.removeClass('active inactive'); // add inactive to the current slide $slides.eq(i).addClass('inactive'); // reset counter if last slide (so animates first one) if(i == numSlides){ i = -1; } // add active to incremented slide (next slide) $slides.eq(++i).addClass('active'); // call this every few seconds	var timer = window.setTimeout(rotate, 5000);	}; // initialize the slider	rotate();	});
});
Wipe Slider - Script Codes
Wipe Slider - Script Codes
Home Page Home
Developer Tcmulder
Username tcmulder
Uploaded August 05, 2022
Rating 4.5
Size 3,603 Kb
Views 56,672
Do you need developer help for Wipe Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tcmulder (tcmulder) Script Codes
Name
Flexslider Enhanced
Percentage Animation
Background Wipe
CSS-Only Slideshow
Sticky Stopper jQuery Plugin
Stickup Sticky Nav jQuery Plugin
Cartoon Bomb
Hover Panes
Divs with Aspect Ratio
Half and Half
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!