Flexbox slider
How do I make an flexbox slider?
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.. What is a flexbox slider? How do you make a flexbox slider? This script and codes were developed by Robert on 08 November 2022, Tuesday.
Flexbox slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox slider</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Flexbox Slider</h1>
<div class="wrap"> <button onclick="prev()">«</button> <div class="sticky">♥</div> <div class="scroller"> <ul class="items"> <li class="item" style="background-image:url(https://farm6.staticflickr.com/5076/14164379250_71c3a5b32a_b.jpg);">HAMBURG</li> <li class="item" style="background-image:url(https://farm3.staticflickr.com/2937/14371160993_186df4a083_b.jpg);">URBAN LIGHTS</li> <li class="item" style="background-image:url(https://farm3.staticflickr.com/2914/14185397280_e51c40b1df_b.jpg);">SOUNDS</li> </ul> </div> <button onclick="next()">»</button>
</div> <script src="js/index.js"></script>
</body>
</html>
Flexbox slider - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
* { box-sizing: border-box; margin: 0; padding: 0;
}
html { font: 18px 'Noto Sans', Arial, sans-serif; background: #333;
}
body { padding: 20px;
}
h1 { text-align: center; color: #f0f0f0; margin-bottom: 1em;
}
.sticky { width: 100px; text-align: center; color: #be2221; font-size: 16px; background: #f0f0f0; line-height: 250px;
}
.wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 90%; margin: auto;
}
button { width: 30px; border: none; background: transparent; color: #fff; font-size: 40px; text-align: center; outline: none; opacity: 0.5; -webkit-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;
}
button:hover { opacity: 1;
}
.scroller { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden;
}
.items { list-style-type: none; white-space: nowrap; font-size: 0; line-height: 0; -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
.item { padding: 30px 20px; display: inline-block; width: 100%; height: 250px; font-size: 25px; letter-spacing: -0.03em; line-height: 1; font-weight: bold; background-size: cover; background-position: 50% 50%; text-transform: uppercase; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.item:nth-child(2) { color: #fff;
}
Flexbox slider - Script Codes JS Codes
var d = document;
var wrap = d.querySelector('.wrap');
var items = d.querySelector('.items');
var itemCount = d.querySelectorAll('.item').length;
var scroller = d.querySelector('.scroller');
var pos = 0;
var transform = Modernizr.prefixed('transform');
function setTransform() { items.style[transform] = 'translate3d(' + (-pos * items.offsetWidth) + 'px,0,0)';
}
function prev() { pos = Math.max(pos - 1, 0); setTransform();
}
function next() { pos = Math.min(pos + 1, itemCount - 1); setTransform();
}
window.addEventListener('resize', setTransform);
Developer | Robert |
Username | rendro |
Uploaded | November 08, 2022 |
Rating | 4.5 |
Size | 3,459 Kb |
Views | 74,888 |
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 |
CSS Slideshow | 1,847 Kb |
CSS Map pin | 2,001 Kb |
Responsive image grid | 2,345 Kb |
CSS3 Browser | 2,882 Kb |
Flat UI buttons | 2,541 Kb |
Greeting card | 2,208 Kb |
Mobile navigation button | 2,659 Kb |
Circular minimal countdown | 4,639 Kb |
CSS3 Diamond | 1,960 Kb |
CSS vintage filter form images | 2,190 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 |
Wikipedia Viewer | Odylic | 2,333 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 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!