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 |
HMD | 8,249 Kb |
Agent Chaos | 4,709 Kb |
CSS Letter animations | 2,116 Kb |
Fibonacci color test | 2,310 Kb |
Visualizer tests | 3,361 Kb |
A Pen by Sladix | 3,349 Kb |
Responsive Stack slider | 3,527 Kb |
Canvas snake animation random bezier curve looped | 2,882 Kb |
Text reveal test | 2,423 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 |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Loading animation | Hafizfattah | 0 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Form Labels | Bartuc | 2,717 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Blog | Rottingroom | 1,430 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 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!