<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Flexbox Carousel</title>
<link rel="stylesheet" href="library/css/common.css" />
</head>
<body>
<h1>Flexbox Carousel</h1>
<p>
<div id="carousel">
<a href="" class="navigation previous">«</a>
<a href="" class="navigation next">»</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
</ul>
</div>
</body>
</html>
<script>
var carousel = (function(){
var container = document.getElementById('carousel'),
items = container.getElementsByTagName('ul')[0];
var active = 0, // the active item (sits far left)
properties = {}, // used to calculate scroll distance
animating = false; // whether the carousel is currently animating
// use Modernizr.prefixed to get the prefixed version of boxOrdinalGroup
//var boxOrdinalGroup = Modernizr.prefixed( 'boxOrdinalGroup' );
var boxOrdinalGroup = "WebkitBoxOrdinalGroup";
//console.log (boxOrdinalGroup);
// list of the end event names in different browser implementations
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MsTransitionEnd',
'transition' : 'transitionend'
};
// use Modernizr.prefixed to work out which one we need
//console.log(Modernizr.prefixed('transition'));
//var transitionEnd = transEndEventNames[ Modernizr.prefixed('transition') ];
var transitionEnd = transEndEventNames[ 'transition' ];
function move(e) {
// prevent the click action
e.preventDefault();
// check if the carousel is mid-animation
if (!animating) {
// get the event's source element
var target = e.target || e.srcElement;
// find out if we are moving next or previous based on class
var next = target.classList.contains( 'next' );
var margin = 0;//= parseInt(items.style.marginLeft) || 0;
// allow our carousel to animate
container.classList.add( 'animate' );
animating = true;
if (next) {
margin = -( ( properties.width*2 )+ properties.marginRight );
if ( active < items.children.length - 1 ) {
active++;
} else {
active = 0;
}
} else {
margin = properties.marginRight;
if ( active > 0 ) {
active--;
} else {
active = items.children.length - 1;
}
}
items.style.marginLeft = margin + 'px';
}
}
function complete() {
if ( animating ) {
animating = false;
// this needs to be removed so animation does not occur when the ordinal is changed and the carousel reshuffled
container.classList.remove( 'animate' );
// change the ordinal
changeOrdinal();
// change the margin now there are a different number of items off screen
items.style.marginLeft = -( properties.width ) + 'px';
}
}
function changeOrdinal() {
var length = items.children.length,
ordinal = 0;
// start at the item BEFORE the active one.
var index = active-1;
/* if the active item was 0, we're now at -1 so
set to the last item */
if (index < 0) {
index = length-1;
}
// now run through adding the ordinals
while ( ordinal < length ) {
// add 1 to the ordinal - ordinal cannot be 0.
ordinal++;
// check the item definetely exists :)
var item = items.children[index];
if ( item && item.style ) {
// new ordinal value
item.style[boxOrdinalGroup] = ordinal;
}
/* as we are working from active we need to go back to
the start if we reach the end of the item list */
if ( index < length-1 ) {
index++;
} else {
index = 0;
}
}
}
return {
init: function() {
var navigation = document.querySelectorAll( 'a.navigation' );
var length = navigation.length;
// add an event listener to each navigation item
var i = 0;
while (i < length) {
navigation[i].addEventListener( 'click' , move );
i++;
}
// event listener for end of a transition
items.addEventListener( transitionEnd, complete );
// get initial width and margin
if (items.children.length > 0) {
var itemStyle = window.getComputedStyle( items.children[0], null ) || items.children[0].currentStyle;
properties = {
width: parseInt( itemStyle.getPropertyValue( 'width' ), 10 ),
marginRight: parseInt( itemStyle.getPropertyValue( 'margin-right' ), 10 )
};
}
// set the initial ordinal values
changeOrdinal();
}()
}
})();
</script>
html,
body {
margin:0;
padding:0;
}
body {
background:#fdfdfd;
font:62.5% helvetica,arial,sans-serif;
margin:0 auto;
}
body * {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
header, footer, nav, section, article, aside {
display:block;
}
h1 {
color:rgba(0,0,0,0.6);
font-size:4.5em;
margin:50px auto;
text-align:center;
text-shadow:2px 2px 0 rgba(0,0,0,0.2);
}
p {
font-size:1.7em;
margin:20px auto;
text-align:center;
}
a {
color:#3333bb;
text-decoration:none;
}
#carousel {
border:solid 1px rgba(0,0,0,0.3);
border-radius:4px;
box-shadow:0 0 0 4px rgba(125,125,125,0.1);
margin:40px 20px;
overflow:hidden;
padding:0;
position:relative;
width:auto;
}
/* navigation items */
#carousel .navigation {
background:rgba(0,0,0,0.1);
color:rgba(255,255,255,0.1);
display:block;
font-family:verdana,sans-serif;
font-size:3em;
height:220px;
padding-top:80px;
position:absolute;
text-align:center;
text-shadow:rgba(0,0,0,0.1); 0 0 2px;
width:50px;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
}
#carousel:hover .navigation {
background:rgba(0,0,0,0.3);
color:rgba(255,255,255,0.8);
text-shadow:rgba(0,0,0,0.7); 0 0 2px;
}
#carousel .navigation:hover {
background:rgba(0,0,0,0.5);
}
#carousel .previous {
left:0;
}
#carousel .next {
right:0;
}
/* carousel container */
#carousel ul {
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
display:-moz-box;
display:-ms-box;
display:-webkit-box;
display:-o-box;
display:box;
list-style-type:none;
margin:5px;
margin-left:-200px;
padding:0;
}
/* standard width and height for the carousel items */
#carousel li {
border:solid 1px #333;
height:200px;
margin-right:10px;
width:200px;
}
/* animation properties for the carousel */
.animate ul {
-moz-transition:margin 1s;
-ms-transition:margin 1s;
-webkit-transition:margin 1s;
-o-transition:margin 1s;
transition:margin 1s;
}
/* different color for each of our items */
#carousel li:nth-child(1) {
background:#6699ff;
}
#carousel li:nth-child(2) {
background:#eb66ff;
}
#carousel li:nth-child(3) {
background:#6bfb64;
}
#carousel li:nth-child(4) {
background:#fbb264;
}
#carousel li:nth-child(5) {
background:#f691e2;
}
#carousel li:nth-child(6) {
background:#fbf264;
}
#carousel li:nth-child(7) {
background:#66d9ff;
}
#carousel li:nth-child(8) {
background:#68ce54;
}
#carousel li:nth-child(9) {
background:#fb6b64;
}
/* different color for each of our items */
#carousel li:nth-child(10) {
background:#6699ff;
}
#carousel li:nth-child(11) {
background:#eb66ff;
}
#carousel li:nth-child(12) {
background:#6bfb64;
}
#carousel li:nth-child(13) {
background:#fbb264;
}
#carousel li:nth-child(14) {
background:#f691e2;
}
#carousel li:nth-child(15) {
background:#fbf264;
}
#carousel li:nth-child(16) {
background:#66d9ff;
}
#carousel li:nth-child(17) {
background:#68ce54;
}
#carousel li:nth-child(18) {
background:#fb6b64;
}
