<!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;
}