<!DOCTYPE html>
<html>

<head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <ul class="slide-show">
        <li>
            <img src="http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg" />
            <div class="caption">
                <span>our aim is <b>Dedicated</b> to conducting business affairs using
                <br /> the highest standards</span>
            </div>
        </li>
        <li>
            <img src="http://www.planwallpaper.com/static/images/colorful-triangles-background.jpg" />
            <div class="caption">
                <span>our solidity is <b>equity</b> Innovation, flexibility, quick and
                <br /> high results - oriented work</span>
            </div>
        </li>

    </ul>
</body>

</html>
// Code goes here

$(document).ready(function() {

    var delay = 3000;

    var sliderItems = $('ul.slide-show').children();


    var count = 1;
    $(sliderItems[0]).addClass('enter');
    var previous;

    var sliderInterval = setInterval(function() {

        previous = count == 0 ? sliderItems.length - 1 : count - 1;
        $(sliderItems[previous]).removeClass('enter').addClass('leave');
        $(sliderItems[count]).addClass('enter');


        setTimeout(function() {
            $(sliderItems[previous]).removeClass('leave');
        }, 600);
        
        count++;
        if (count >= sliderItems.length)
            count = 0;
    }, delay);

});
/* Styles go here */

.slide-show {
    display: block;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.slide-show li {
    display: block;
    width: 600px;
    height: 400px;
    position: absolute;
    overflow: hidden;
    left: 100%;
    -o-transition: left 400ms;
    -moz-transition: left 400ms;
    -webkit-transition: left 400ms;
    transition: left 400ms;
    z-index: 10;
}

.slide-show .caption {
    color: white;
    font-size: 25px;
    text-align: center;
    display: block;
    width: 600px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
}

.caption span {
    background-color: rgba(50, 50, 50, 0.8);
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%);
}

.slide-show img {
    width: 600px;
    height: 400px;
}

.enter {
    left: 0 !important;
    z-index: 100 !important;
}

.leave {
    left: -100% !important;
}