Skip to content

Instantly share code, notes, and snippets.

@butlerx
Created January 8, 2017 10:08
Show Gist options
  • Save butlerx/b7d3746a9b6669897dfc68e02c64908c to your computer and use it in GitHub Desktop.
Save butlerx/b7d3746a9b6669897dfc68e02c64908c to your computer and use it in GitHub Desktop.
Flexbox slider

Flexbox slider

Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.

A Pen by Cian Butler on CodePen.

License.

<div class="slider">
<button onclick="prev()">&laquo;</button>
<div class="scroller">
<ul class="items">
<li class="item" style="background-image:url(http://lorempixel.com/960/300/city);">City</li>
<li class="item" style="background-image:url(http://lorempixel.com/960/300/animals);">Animals</li>
<li class="item" style="background-image:url(http://lorempixel.com/960/300/sports);">Sports</li>
</ul>
</div>
<button onclick="next()">&raquo;</button>
</div>
var items = document.querySelector('.items');
var itemCount = document.querySelectorAll('.item').length;
var pos = 0;
var transform = Modernizr.prefixed('transform');
function setTransform() {
items.style[transform] = 'translate3d(' + (-pos * items.offsetWidth) + 'px,0,0)';
}
function prev() {
if (pos === 0) {
pos = Math.max(itemCount - 1, 0);
} else {
pos = Math.max(pos - 1, 0);
}
setTransform();
}
function next() {
if (pos === itemCount-1) {
pos = 0;
} else {
pos = Math.min(pos + 1, itemCount - 1);
}
setTransform();
}
window.addEventListener('resize', setTransform);
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
body {
background: #333;
padding: 20px;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slider {
-ms-flex-align: stretch;
-webkit-box-align: stretch;
align-items: stretch;
box-sizing: border-box;
display: flex;
margin: 2em auto;
padding: 0;
width: 90%;
}
.slider button {
-webkit-transition: opacity 300ms ease-out;
background: transparent;
border: none;
box-sizing: border-box;
color: #fff;
font-size: 40px;
margin: 0;
opacity: 0.5;
outline: none;
padding: 0;
text-align: center;
transition: opacity 300ms ease-out;
width: 30px;
}
.slider button:hover {
opacity: 1;
}
.slider .scroller {
-ms-flex: 1;
-webkit-box-flex: 1;
box-sizing: border-box;
flex: 1;
margin: 0;
overflow: hidden;
padding: 0;
}
.slider .scroller .items {
-webkit-transition: -webkit-transform 1s ease-in-out;
box-sizing: border-box;
font-size: 0;
line-height: 0;
list-style-type: none;
margin: 0;
padding: 0;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
white-space: nowrap;
}
.slider .scroller .items .item {
background-position: 50% 50%;
background-size: cover;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
color: #fff;
display: inline-block;
font-size: 25px;
font-weight: bold;
height: 250px;
letter-spacing: -0.03em;
line-height: 1;
margin: 0;
padding: 0;
padding: 30px 20px;
text-transform: uppercase;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment