How to make slideshow with divs inside, not images?

html, javascript, jquery, slideshow

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

Problem

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.

Original source