Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
A Pen by Cian Butler on CodePen.
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
A Pen by Cian Butler on CodePen.
<div class="slider"> | |
<button onclick="prev()">«</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()">»</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%; | |
} |