Pure JavaScript Slider

Developer
Kevin Gimbel
Size
3,122 Kb
Views
48,576
  1. Pure JavaScript Slider Previews
  2. Pure JavaScript Slider HTML Codes
  3. Pure JavaScript Slider CSS Codes
  4. Pure JavaScript Slider JS Codes

How do I make an pure javascript slider?

Just a very basic and simple slider. Blog Post: Pure JavaScript Slider. What is a pure javascript slider? How do you make a pure javascript slider? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

Pure JavaScript Slider Previews
IQ Test

Pure JavaScript Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure JavaScript Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Pure JavaScript Slider.</h2>
<h5>No jQuery was harmed!</h5>
<div class="slider__container">
<div class="slider" data-js="sslide"> <img src="http://cdn.eyeem.com/thumb/h/800/eaa71c732cbee5701edb4e0e937feb3222ed4a20-1386257098" /> <img src="http://cdn.eyeem.com/thumb/h/800/28b3b67fe9d1015a9738b3be7a8a7ae8f4a60421-1392731499"/> <img src="http://cdn.eyeem.com/thumb/h/800/3343d0501110d31ec2e424ebcf92106c7195587d-1389594002" /> <img src="http://cdn.eyeem.com/thumb/h/800/b93b2e1e77cd05a6ec4139f5e31b9c8809223654-1385122399" /> <img src="http://cdn.eyeem.com/thumb/h/800/5cacad00f9fb6574a1b58d76f55f87b0d972203e-1385563404" /> <img src="http://cdn.eyeem.com/thumb/h/800/d3ee24ea591d90f690c3f2819878097cff8272f9-1384525350" /> <img src="http://cdn.eyeem.com/thumb/h/800/e3b6546ac1dfa8b261da5c3dbb40449d6edef0bb-1381759073" /> <img src="http://cdn.eyeem.com/thumb/h/800/7102e8edb21b3e5a31f8f9067d6b024c58c38137-1381507137" /> <img src="http://cdn.eyeem.com/thumb/h/800/60e487d3a8683c8d83c75e8790f25cd822bb70ad-1381150604" /> <img src="http://cdn.eyeem.com/thumb/h/800/bce02b5cec78a8fd45772530775ecc5fe610524a-1379255277" /> <img src="http://cdn.eyeem.com/thumb/h/800/506905a65fa0d57d71a0bf90c1741cb9120bf0c3-1378290101" /> <img src="http://cdn.eyeem.com/thumb/h/800/4c60d57c4d80c9d9a26bcd8882c6d4a1e7fa0b9a-1374858049" />
</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pure JavaScript Slider - Script Codes CSS Codes

* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font: 1rem/1.3 Arial, Helvetica, sans-serif;
}
h2, h5 { text-align: center;
}
h5 { text-transform: uppercase; color: #aeaeae;
}
.slider__container { width: 40em; height: 25em; margin: 1.5em auto; overflow: hidden;
}
.slider img { float: left;
}

Pure JavaScript Slider - Script Codes JS Codes

document.addEventListener('DOMContentLoaded', function() { // sslider = Simple SLIDER function sslider() { var current = 0, i, slider = document.querySelector('[data-js="sslide"]'), allImages = slider.querySelectorAll('img'), imgWidth = Math.ceil(100 / allImages.length), sliderWidth = allImages.length * 100; slider.style.width = sliderWidth + '%'; for(i = 0; i <= allImages.length - 1; i++) { allImages[i].style.width = imgWidth + '%'; } function animateRight(cur) { var i = imgWidth, time = 50; var animate = setInterval(function() { if(i <= sliderWidth) { allImages[cur].style.marginLeft = "-" + i + "%"; i--; } else { clearInterval(animate); } }, time); } function reset() { for(i = 0; i <= allImages.length - 1; i++) { animateRight(i); } // resseting the current image to the first image current = 0; } function animateLeft(cur) { var i = 0, time = 50; var animate = setInterval(function() { if(i <= imgWidth) { allImages[cur].style.marginLeft = "-" + i + "%"; i++; } else { clearInterval(animate); } }, time); } setInterval(function () { if(current <= allImages.length - 2) { animateLeft(current); current++; } else { reset(); } }, 3000);
} // end sslider();
});
Pure JavaScript Slider - Script Codes
Pure JavaScript Slider - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 3.5
Size 3,122 Kb
Views 48,576
Do you need developer help for Pure JavaScript 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!

Kevin Gimbel (kevingimbel) Script Codes
Name
Alternative Image Classes in Markdown
Pinterest Thumb
CSS3 only Turret from Portal
ViewSwitcher
Slide Menu
A Pen by Kevin Gimbel
Register or Sponsor Prototype
Nerdli.st
CSS3 only Vault-Tec Logo
Pure CSS3 single element Link from TLOZ
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!