Responsive Stack slider
How do I make an responsive stack slider?
A simple slider using css transform and perspective. What is a responsive stack slider? How do you make a responsive stack slider? This script and codes were developed by Sladix on 09 December 2022, Friday.
Responsive Stack slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Stack slider</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wall"> <div id="previous" class="disabled"><i class="fa fa-arrow-left"></i></div> <div id="container"> <span><img src="https://placeimg.com/200/200/any" alt="" /></span> <span><img src="https://placeimg.com/200/200/any?1" alt="" /></span> <span><img src="https://placeimg.com/200/200/any?2" alt="" /></span> <span><img src="https://placeimg.com/200/200/any?3" alt="" /></span> <span><img src="https://placeimg.com/200/200/any?4" alt="" /></span> <span><img src="https://placeimg.com/200/200/any?5" alt="" /></span> <span><img src="https://placeimg.com/200/200/any?6" alt="" /></span> <span><img src="https://placeimg.com/200/200/any?7" alt="" /></span> <span><img src="https://placeimg.com/200/200/any?8" alt="" /></span> </div> <div id="next"><i class="fa fa-arrow-right"></i></div>
</div>
<div class="footer">Stack Slider by <a target="_blank" href="https://twitter.com/Sladix">Sladix</a></div> <script src="js/index.js"></script>
</body>
</html>
Responsive Stack slider - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { margin: 0; padding: 0; font-family: "Roboto";
}
body { background: radial-gradient(#fff, #aaa);
}
.footer { text-align: center; position: fixed; padding: 5px; bottom: 0; left: 0; width: 100%;
}
.footer a { color: red;
}
#previous.disabled,
#next.disabled { color: #eee; transition: all 0.3s ease; cursor: default;
}
#previous,
#next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 50px; z-index: 999; transition: all 0.3s ease; cursor: pointer;
}
#previous { left: 20px;
}
#next { right: 20px;
}
#wall { height: 100vh; perspective: 1000px; overflow: hidden;
}
#wall #container { margin: 0; text-align: center; line-height: 100vh; height: 100vh; transform-style: preserve-3d; position: relative; animation: rotateXYeah 10s ease-in-out infinite;
}
#wall #container > span { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: all 0.3s ease; user-select: none;
}
#wall #container > span > * { display: inline-block; vertical-align: middle;
}
Responsive Stack slider - Script Codes JS Codes
var container = document.getElementById('container');
var spans = container.children;
var transform = 'translate3d(0,-{y}vh,-{z}vh)';
var colorstep = 255 / spans.length;
var currentIndex = 0;
// Initialisation
step(1,-1);
function getCurrentEl(){ console.log(container) return container.querySelector('span:nth-child('+(currentIndex+1)+')');
}
function getPreviousEl(){ return container.querySelector('span:nth-child('+(currentIndex)+')');
}
function slideUp(el){ el.style.transform = 'translate3d(0,-100vh,0)';
}
function slideDown(el){ el.style.transform = 'translate3d(0,0,0)';
}
function step(dir,index){ let selector = 'span:nth-child(n+'+(index+2)+')'; if(dir < 1){ selector = 'span:nth-child(n+'+(index+1)+')'; } console.log(selector); let toMove = container.querySelectorAll(selector); toMove.forEach((v,i) => { let gs = Math.round(0+colorstep*i); gs = gs > 255 ? 255 :gs; let z = i*20, y = i*5; if(dir < 1){ z = (i+1)*20; y = (i+1)*5; } v.style.transform = transform.replace('{z}',z).replace('{y}',y); v.style.color = 'rgb('+gs+','+gs+','+gs+')'; });
}
// Could be factorized in one function
function Snext(evt){ if(currentIndex < spans.length-1){ let c = getCurrentEl(); slideUp(c); step(1,currentIndex); currentIndex++; if(currentIndex == spans.length-1) { document.getElementById('next').classList.add('disabled'); } document.getElementById('previous').classList.remove('disabled') }
}
function Sprevious(evt){ if(currentIndex > 0){ let c = getPreviousEl(); slideDown(c); step(-1,currentIndex); currentIndex--; document.getElementById('next').classList.remove('disabled') if(currentIndex == 0) { document.getElementById('previous').classList.add('disabled'); } }
}
document.getElementById('next').addEventListener('click',Snext,this,false);
document.getElementById('previous').addEventListener('click',Sprevious,this,false);
Developer | Sladix |
Username | Sladix |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 3,527 Kb |
Views | 10,120 |
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!
Name | Size |
Fibonacci color test | 2,310 Kb |
Visualizer tests | 3,361 Kb |
Canvas snake animation random bezier curve looped | 2,882 Kb |
A Pen by Sladix | 3,349 Kb |
HMD | 8,249 Kb |
CSS Letter animations | 2,116 Kb |
Text reveal test | 2,423 Kb |
Agent Chaos | 4,709 Kb |
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!
Name | Username | Size |
A Pen by Sooba | Sooba | 2,516 Kb |
CSS Patterns | Alyda | 3,953 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Tooltip in table | Roine | 3,713 Kb |
3D-box | Parthviroja | 2,346 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!