How to make slideshow with divs inside, not images?

Question

I want to make a slideshow with javascript, but I only know how to do that with few images inside, but for my web I need to do slideshow in which I can put divs?

I only need two slides, in every slide are 3 divs, and that two slides change in left.

HTML

<div id="container" class="cont2">

        <div id="box1" class="box">Div #1<div class="kkc"><p>Div Caption1</p></div></div>
        <div id="box2" class="box">Div #2<div class="kkc"><p>Div Caption2</p></div></div>
        <div id="box3" class="box">Div #3<div class="kkc"><p>Div Caption3</p></div></div>

CSS

#container {
position: absolute;
margin: 0px;
padding: 0px;
height: 304px;
width: 500px;
overflow: hidden; 
background-color:  white;
margin-top: 78px;
margin-left: 124px;
z-index: -1;
}

.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;   
top: 0px;
margin-left: -25%;
z-index: -1;
cursor: pointer;
}

 #box1 {
background-color: green;
left: -150%;

}


#box2 {
background-color: yellow;
left:50%;
 }

 #box3 {
background-color: red;
left: 150%;


}

Javascript

$(document).ready(function(){
var refreshId;
var restartAnimation = function() {
    clearInterval(refreshId);
    refreshId = setInterval( function() 
    {    
        $('.box').each(function() {
            if ($(this).offset().left < 0) {
                $(this).css("left", "150%");
            } else if ($(this).offset().left > $('#container').width()) {
                $(this).animate({
                    left: '50%'
                }, 500 );
            } else {
                $(this).animate({
                    left: '-150%'
                }, 500 );
            }
        });
    },1000);
}

restartAnimation()


});

I've try this but its not working.

Solution

JS:

function Divs() {
    var divs= $('#parent div'),
        now = divs.filter(':visible'),
        next = now.next().length ? now.next() : divs.first(),
        speed = 1000;

    now.fadeOut(speed);
    next.fadeIn(speed);
}

$(function () {
    setInterval(Divs, 1400);
});

CSS:

#parent div {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
}
#parent div:first-child {
    display:block;
}
div{background:red}

#parent > div{
    width:400px;
    height:250px;
}

HTML:

<div id="parent">

        <div id="box1" class="box">Div #1</div>
        <div id="box2" class="box">Div #2</div>
        <div id="box3" class="box">Div #3</div>
</div>

here is a Js Fiddle example

Comments

[Admin]

tnx! it was verry helpful!

[ɹɐqʞɐ zoɹǝɟ]

if it helps you please make it as a answer so that new people can find it out easily,all the best