Geek asks and answers

How to make a slide show with a div inside and not with images?

I want to make a slide show with javascript, but I only know how to do this with multiple images inside, but for my network do I need to make a slide show in which I can put divs?

I need only two slides, on each slide there are 3 divs and two slides change on the 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 tried this but did not work.

+3
source share
1 answer

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 an example of Js Fiddle

+4
source

More articles:


All Articles