Super Simple Fader

Developer
Kyle Foster
Size
2,014 Kb
Views
62,744
  1. Super Simple Fader Previews
  2. Super Simple Fader HTML Codes
  3. Super Simple Fader CSS Codes
  4. Super Simple Fader JS Codes

How do I make an super simple fader?

Just about the easiest (and leanest) jQuery image fader out there. Thanks to @snookca for doing the brunt of the work.. What is a super simple fader? How do you make a super simple fader? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.

Super Simple Fader Previews
IQ Test

Super Simple Fader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Super Simple Fader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="fader"> <img src="http://ecx.images-amazon.com/images/I/517HpPUIsxL.jpg" alt="Image One"> <img src="http://ecx.images-amazon.com/images/I/413WE38pDRL.jpg" alt="Image Two"> <img src="http://ecx.images-amazon.com/images/I/71Uj7GcOkZL._SL1500_.jpg" alt="Image Three"> <img src="http://ecx.images-amazon.com/images/I/51MSV6KQM5L.jpg" alt="Image Four"> <img src="http://ecx.images-amazon.com/images/I/71ATrvSOhcL._SL1400_.jpg" alt="Image Five">
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Super Simple Fader - Script Codes CSS Codes

#fader { display: none; position: relative; width: 90%; max-width: 400px; margin: 0 auto; top: 20px;
}
#fader img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto;
}

Super Simple Fader - Script Codes JS Codes

$(document).ready(function() { var fader = $('#fader'); fader.find('img:gt(0)').hide(); fader.fadeTo(500, 1); setInterval(function(){ fader.find(':first-child') .fadeTo(500, 0) .next('img') .fadeTo(500, 1) .end() .appendTo(fader); }, 4000);
});
Super Simple Fader - Script Codes
Super Simple Fader - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 4.5
Size 2,014 Kb
Views 62,744
Do you need developer help for Super Simple Fader?

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!

Kyle Foster (hkfoster) Script Codes
Name
SVG Optimization Breakdown
Askew - A Subtle Parallax Banner Plugin
Gradual.js
Rumble on Hover
A Pen by Kyle Foster
Cattywompus - A Subtle Parallax Banner Plugin
Vanilla FlowType.js
Manipulating SVG With CSS
Messing Around with CSS3 Shadows
Freemason.js
Create amazing art & images 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!