[SlavaPav]

Любой нативный код быстрее написанного тобой. Экспериментировал недавно:

<div id="imageSlider">
    <ul>
        <li>
            <figure>
                <a href="#"><img src="img/sliderImg.jpg" alt="#"></a>
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
        <li>
            <figure>
                <img src="img/sliderImg.jpg" alt="#">
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
        <li>
            <figure>
                <img src="img/sliderImg.jpg" alt="#">
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
        <li>
            <figure>
                <img src="img/sliderImg.jpg" alt="#">
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
        <li class="last">
            <figure>
                <img src="img/sliderImg.jpg" alt="#">
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
    </ul>
</div>

/*---------------(slider)------------------*/

#imageSlider {
    position: absolute;
    top: 100px;
    left: 25%;
    z-index: 100;
    width: 600px;
    height: 300px;
    border: 15px solid #000;
    background: #red;
    overflow: hidden;
    
    -webkit-box-shadow: 0  0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0  0 10px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0  0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0  0 10px rgba(0, 0, 0, 0.5);
}

#imageSlider ul {
    position: absolute;
    width: 2500px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
}

#imageSlider:hover li {
    margin-left: -80px;
}

#imageSlider:hover li:first-child {
    margin: 0;
}

#imageSlider li {
    position: relative;
    float: left;
    width: 120px;
    border-left: 3px solid #000;
    overflow: hidden;
    
    -o-transition: all .3s;
    -moz-transition: all .7s;
    -webkit-transition: all .7s;
    transition: all .5s;
}

#imageSlider li:hover {
    width: 500px;
}

#imageSlider li.active, #imageSlider li.active:hover {
    width: 500px;
}

#imageSlider li.last {
    width: 500px;
}

#imageSlider li.last:hover {
    width: 550px;
}

#imageSlider li:hover figcaption {
    opacity: 1;
}

#imageSlider figure {
    padding: 0;
    margin: 0;
}
#imageSlider figcaption {
    position: absolute;
    top: 50%;
    width: 150px;
    padding: .5em;
    margin-top: -1em;
    background: #000;
    background: rgba(0, 0, 0, 0.9); 
    color: #fff;;
    opacity: 0;
    
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
    
    -o-transition: all .5s;
    -moz-transition: all .5s .3s;
    -webkit-transition: all .5s .3s;
    transition: all .5s;
}

#imageSlider figcaption.active {
    top: 10%;
    width: 90%;
    height: 40%;
}

#imageSlider li.active {
    width: 500px;
    margin: 0 50px 0 -150px;
}

#imageSlider li.active figcaption {
    opacity: 1;
}