CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ray Lionfang
Ray Lionfang

Reputation: 687

Slide in and slide out simultaneously

I am trying to make a slider that changes images with mouse click on a right arrow button, but I suffer some blank frames. I want it to be seamless. here are my codes:

html:

<div id="img_slider">
    <img src="../images/proj/1(2).jpg" id="img_1" class="slide_img"/>
    <img src="../images/proj/1.jpg"id="img_2" class="slide_img" />
    <img src="../images/proj/2.jpg" id="img_3" class="slide_img" />
    <img src="../images/proj/3.jpg" id="img_4" class="slide_img" />
    <img src="../images/proj/4.jpg" id="img_5" class="slide_img" />
    <img src="../images/proj/5.jpg" id="img_6" class="slide_img" />
</div>

and this is the css:

#img_slider{
    background:url(../images/preloader.gif)no-repeat center;
    background-color:rgba(253,251,187,.6);
    background-size:50px;
    overflow:hidden;
    z-index:2;
    height:500px;
}

.slide_img{
    display:none;
    width:100%;
    height:500px;
    z-index:1;
}

.slide_img:first-child{
    display:block;
}

and this is the javascript:

var count= 1;

function right(){   
    count++;
    if(count>6){
        count=1;    
    }
    $(".item").css("background","#333");
    $("#item_"+count).css("background","#3AF71A");
    $(".slide_img").hide("slide",{direction:'right'},500);
    $("#img_"+count).delay(300).show("slide",{direction:'left'},500);

    if(count==6){
        count=0;
    }
}

any help is greatly appreciated. 0:)

Upvotes: 0

Views: 172

Answers (2)

riccardolardi
riccardolardi

Reputation: 1741

You should make it like this: http://jsfiddle.net/v7au9/9/

HTML

<div id="slider_container">
  <div id="img_slider">
    <img src="http://placekitten.com/120/100" id="img_1" class="slide_img"/>
    <img src="http://placekitten.com/120/100"id="img_2" class="slide_img" />
    <img src="http://placekitten.com/120/100" id="img_3" class="slide_img" />
  </div>
</div>

CSS

#slider_container {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 100px;
}

#img_slider {
  position: absolute;
  left: 0px;
  width: 99999px;
}

img {
  float: left;
}

JS

var count = 1;
var newLeft = 0;

$(document).ready(function() {

  var timer = setInterval(function() {

    newLeft = parseInt($('#img_slider').css('left')) - $('img').width();

    if(count == $('img').length){
        count = 0;
        newLeft = 0;
    }

    $('#img_slider').animate({
        left: newLeft
    });

    count++;

  }, 1000);

});

Upvotes: 1

Shakesy
Shakesy

Reputation: 335

Use .promise() instead of .delay(), it will wait for the animation to finish before continuing.

Upvotes: 1

Related Questions