CODEWITHSUNDEEP
javascriptjqueryjquery-animateslideshow
Priya Rawat
Priya Rawat

Reputation: 259

Creating a slideshow with left to right animation?

I have the following code

$(function(){	  
    setInterval(function () {
        $('#slider').animate({left: 0}, 500, function () {
            $('#slider img:first-child').appendTo('#slider');
            $('#slider img').css('left', '');
    
        });
     }, 1000);
});
#slider {
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    width: 500px;
    height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
    <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg"></img>
    <img src="http://www.gettyimages.in/CMS/Pages/RoyaltyFree/StaticContent/109720793.jpg"></img> 
    <img src="http://www.gettyimages.in/CMS/Pages/RoyaltyFree/StaticContent/108114205.jpg"></img>
</div>

Images are switched but not sliding they just replace each other. What am I doing wrong?

Upvotes: 1

Views: 5403

Answers (1)

Saurabh
Saurabh

Reputation: 439

replace this line

$('#slider img').css('left', '');

with this

$('#slider').css('left', '0');

fiddle here : https://jsfiddle.net/nu5j2dyr/

another fiddle for sliding anmation: https://jsfiddle.net/88u56y9h/1/

Upvotes: 1

Related Questions