Galeria Automática

by Martin Miranda

HTML

<div id="wrapperContainer">
    <div id="container">
        <ul class="menu">
            <li class="imagen">
                <img src="https://nicolasramospintado.files.wordpress.com/2008/09/taj-mahal-agra-1.jpg" />
            </li>
            <li class="imagen">
                <img src="http://www.fondox.net/wallpapers/resoluciones/13/ciudad-de-nueva-york_1920x1200_304.jpg" />
            </li>
            <li class="imagen">
                <img src="http://fotos.subefotos.com/5537156b573a9ebda87a5ee5d487d9b6o.jpg" />
            </li>
            <li class="imagen">
                <img src="http://credigalonline.com.ar/wp-content/uploads/2015/01/Elia-Locardi-Travel-Photography-Towering-Dreams-Dubai-UAE-900-WM1.jpg" />
            </li>
        </ul>
    </div>
</div>

SCSS

*{
    box-sizing:border-box;
}
body,html{
    width:100%;
    height:100%;
    margin:0 0;
    padding:0 0;
    background-color:rgba(200,200,200,.6);
    overflow:hidden;
    
}
#wrapperContainer{
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    position:absolute;
    width:700px;
    height:400px;
    background-color:rgba(10,10,10,1);
    overflow:hidden;
    border-radius:20px;
    box-shadow:0px 10px 0px 0px rgba(20,20,20,.3);
}
#container{
    position:relative;
    width:700px*4;
    height:100%;
    background-color:rgba(50,160,10,1);
}
.menu{
    list-style:none;
    margin:0 0;
    padding:0 0;
    width:100%;
    height:100%;
}
.imagen{
    width:700px;
    height:100%;
    display:inline-block;
    margin-right:-4px;
}
.menu>.imagen>img{
    width:100%;
    height:100%;
}

JavaScript

$(document).ready(function () {
    $scroll = 700;
    $activo = 1;
    $imagenes = $('.imagen').size();
    $tamaño = $('#container').css('width');
    setInterval(pasar, 2000);
});

function pasar() {
    if ($activo >= $imagenes) {
        $activo = 0;
        $scroll = 0;
    }
    $('#wrapperContainer').animate({
        scrollLeft: $scroll + 'px'
    }, 200, function () {
        $scroll = $scroll + 700;
        $activo = $activo + 1;
    });
};