Wipe slider

Developer
Krishna Babu
Size
2,370 Kb
Views
8,096
  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?

Image slider with wipe transition. CSS + HTML + jQuery. What is a wipe slider? How do you make a wipe slider? This script and codes were developed by Krishna Babu on 11 January 2023, Wednesday.

Wipe slider Previews
IQ Test

Wipe slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wipe slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>Wipe Slider</h1>
</header>
<div id="container"> <div id="slider"> <ul> <li><figure class="img-figure"><img src="http://www.flashaddicts.com/clientdisplay/images/1.jpg"/></figure></li> <li><figure class="img-figure"><img src="http://www.flashaddicts.com/clientdisplay/images/2.jpg"/></figure></li> <li><figure class="img-figure"><img src="http://www.flashaddicts.com/clientdisplay/images/3.jpg"/></figure></li> <li><figure class="img-figure"><img src="http://www.flashaddicts.com/clientdisplay/images/4.jpg"/></figure></li> </ul> </div>
</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

@import url(https://fonts.googleapis.com/css?family=Raleway:400, 900);
body{background-color:#000; font-family: 'Raleway', sans-serif; color: #fff;}
header h1{ text-align: center; font-weight: bold; margin: 20px 0;
}
*{margin:0; padding:0;}
#container{width:100%; height:auto;}
#slider{width:800px;margin:0 auto;}
#slider ul{list-style:none;width:800px;height:300px;}
#slider ul li{position:absolute;}

Wipe slider - Script Codes JS Codes

$(document).ready( function(){ var counter=0; var imgurl,imgCounter; $('#container li').each(function(index){$('#container li:eq('+index+')').css('opacity', 0);}); $("#slider").prepend('<div style="width:800px; height:300px;position:absolute; z-index:99" id="fmask"></div>'); $('#container li:eq(0)').css('opacity', 1); imgurl = $('#container li:eq(1) img').attr('src'); $('#fmask').css({'width': '0px','background-image': 'url("' + imgurl + '")'}); function playAnim(){ flag = true; $('#fmask').animate({width:($('#slider').width())}, 1000, function(){ $('#slider ul li:eq('+counter+')').css('opacity', 0); counter++; imgCounter = counter = (counter > ($('#slider ul li').length - 1))?0:counter;	$('#slider ul li:eq('+counter+')').css('opacity', 1); imgCounter++;	imgCounter = (imgCounter > ($('#slider ul li').length - 1))?0:imgCounter;	imgurl = $('#slider ul li:eq('+imgCounter+') img').attr('src');	$('#fmask').css({'width': '0px','background-image': 'url("' + imgurl + '")'}); }); } playAnim();	setInterval(playAnim, 5000);
});
Wipe slider - Script Codes
Wipe slider - Script Codes
Home Page Home
Developer Krishna Babu
Username krishnab
Uploaded January 11, 2023
Rating 3
Size 2,370 Kb
Views 8,096
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!

Krishna Babu (krishnab) Script Codes
Name
AngularJs Combobox
Delhi Metro
Customize Selector with Google Font
Image Swaping
Paging
Page
Upload Button
Justify Horizontal Menu
No effect slideshow
Background
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!