Carousel

Carousel

by Angelo Rogério Rubin

HTML

<header id="header">
<div class="content">
<ul id="midias" class="fright">
<li class="fleft midias-item">F</li>
<li class="fleft midias-item">T</li>
</ul><!-- #midias -->
<nav id="header-nav" class="clear">
<div class="fleft">
<a href="" class="header-nav-item fleft">Home</a>
<a href="" class="header-nav-item fleft">Sobre nós</a>
<a href="" class="header-nav-item fleft">A Doceira</a>
</div>
<img src="images/logo.png" alt="" id="logo" class="fleft" />
<div class="fright">
<a href="" class="header-nav-item fleft">Sabores</a>
<a href="" class="header-nav-item fleft">Imprensa</a>
<a href="" class="header-nav-item fleft">Contato</a>
</div>
</nav><!-- #header-nav -->
</div>
</header><!-- #header -->
<section id="wrap-slider" class="slider-step-1">
<div id="slider-inner">
<img src="images/prev.png" alt="" class="slider-control slider-prev" id="prev" />
<ul id="slider">
<li class="fleft slider-1">
<img src="images/01.jpg" alt="">
</li>
<li class="fleft slider-2">
<img src="images/02.jpg" alt="">
</li>
<li class="fleft slider-3">
<img src="images/03.jpg" alt="">
</li>
</ul>
<img src="images/next.png" alt="" class="slider-control slider-next" id="next" />
</div><!-- #slider-inner -->
</section><!-- #wrap-slider -->
<section id="content-about">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, obcaecati, error ipsam magnam minus sit molestiae sapiente a reiciendis veritatis animi eligendi modi voluptate distinctio sint reprehenderit ex fugiat. Dolor.</p>
</div>
</section><!-- #content-about -->

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
body {
    font: 14px Tahoma, sans-serif;
}
a { text-decoration: none; }

.fleft { float: left; }
.fright { float: right; }
.clear { clear: both; }

.content { margin: 0 auto; width: 900px; }
#header {
    position: fixed;
    top: 0; left: 0;
    z-index: 10;
    width: 100%; height: 78px;
    background: url('images/bg-header.png') repeat-x center top;
}
#header .content { width: 900px; }

#header-nav { padding-top: 6px; }
.header-nav-item {
    text-transform: uppercase;
    color: #fff;
    font-size: 18px;
    margin-right: 30px;
}
.header-nav-item:last-child { margin-right: 0; }

#midias { height: 30px; padding-top: 10px; color: #fff; }
.midias-item { margin-right: 15px; }

#logo {
    position: absolute;
    left: 50%; top: 5px;
    margin-left: -75px;
}

#wrap-slider {
    overflow: hidden;
    height: 658px;
    padding-top: 75px;
}

.slider-1,
.slider-2,
.slider-3 {
    position: absolute; top: 0;
    transition: all 1s ease-in-out;
}

.slider-step-1 .slider-1 { left: 0px; z-index: 2; }
.slider-step-1 .slider-2 { left: 33%; z-index: -1; }
.slider-step-1 .slider-3 { left: -33%; }

.slider-step-2 .slider-1 { left: -33%; }
.slider-step-2 .slider-2 { left: 0px; z-index: 2; }
.slider-step-2 .slider-3 { left: 33%; z-index: -1; }

.slider-step-3 .slider-1 { left: 33%; z-index: -1; }
.slider-step-3 .slider-2 { left: -33%; }
.slider-step-3 .slider-3 { left: 0px; z-index: 2; }

#slider {
    margin: 0 auto;
    width: 100%;
    position: absolute; top: 0; left: 0;
    transition: all 1.5s;
}
#slider-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
#slider-inner li { width: 100%; }
#slider-inner li > img { width: 100%; }
.slider-control {
    position: absolute;
    top: 200px;
    z-index: 5;
    cursor: pointer;
}
.slider-prev { left: 20px; }
.slider-next { right: 20px; }

#content-about {
    height: 600px;
    padding-top: 50px;
    background: #FEA8A9;
}

JavaScript

(function(){
"use strict";
var $prev = document.getElementById("prev"),
$next = document.getElementById("next"),
$wrap = document.getElementById("wrap-slider"),
slide = 1;
$next.addEventListener("click", function(){
$wrap.classList.remove("slider-step-1", "slider-step-2", "slider-step-3");
slide = slide < 3 ? slide + 1 : 1;
$wrap.classList.add("slider-step-" + slide);
});
$prev.addEventListener("click", function(){
$wrap.classList.remove("slider-step-1", "slider-step-2", "slider-step-3");
slide = slide > 1 ? slide - 1 : 3;
$wrap.classList.add("slider-step-" + slide);
});
}());