Flexbox slider

Developer
Robert
Size
3,459 Kb
Views
74,851
  1. Flexbox slider Previews
  2. Flexbox slider HTML Codes
  3. Flexbox slider CSS Codes
  4. Flexbox slider JS Codes

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 Previews
IQ Test

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()">&laquo;</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()">&raquo;</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);
Flexbox slider - Script Codes
Flexbox slider - Script Codes
Home Page Home
Developer Robert
Username rendro
Uploaded November 08, 2022
Rating 4.5
Size 3,459 Kb
Views 74,851
Do you need developer help for Flexbox 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!

Robert (rendro) Script Codes
Name
Circular minimal countdown
A Pen by Robert
Confirm appointment dialog
WebGL cube test
CSS3 Diamond
Responsive image grid
CSS Map pin
CSS Slideshow
CSS vintage filter form images
Subtle overlay
Create amazing Facebook ads 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!