Improve slide effect

Question

I have created a simple slider

html

<div id="sldvid1" class="slider" >
    <img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
      <img picnum="2"  style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
      <img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
<hr>
<div id="sldvid2" class="slider" >
    <img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
      <img picnum="2"  style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
      <img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>

$

var timer1 = setInterval(runSlide, 1000);
var curnum = 1;
function runSlide()
{
    curnum = $(".slider img:visible").attr('picnum');
    //$("#sldvid1 img[picnum=" + curnum + "]").fadeOut(); 
    if(curnum == 3){
        curnum = 1;
    }
    else
    {
        curnum++;
    }
   // $(".slider img").hide();
   //$(".slider img[picnum=" + curnum + "]").show(); 
     $(".slider img").hide();
   $(".slider img[picnum=" + curnum + "]").show(); 
    //console.log(curnum);

}

CSS

.slider{
    height:50px;
}

Demo

http://jsfiddle.net/mparvez1986/vf401e2y/

Everything is working fine, I just need some one to improve effect so that it could effect like moving from left to right, I tried with some effect, but it seems it required some css manipulation as well

Thanks

Answer 1

I modified your code to create a carousel where images are slid in and out. I accomplished this by animating the margin-left CSS property with jQuery. I specified a size for the .slider class and used overflow: hidden; to ensure the sliding images were not displayed outside of it.

If you wish, you can change the transition effect by changing the CSS property that is animated and ensuring that the elements are in the correct position for the animation before it begins.

You can also change the speed of the animation by changing the magic number 1000 that I've left in the calls to animate. This number is specified in milliseconds.

By the way, I should point out that while custom HTML attributes are allowed in HTML5 they should begin with data-; they are called data attributes.

jsfiddle

HTML

<div id="sldvid1" class="slider">
    <img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
    <img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
    <img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
<hr>
<div id="sldvid2" class="slider">
    <img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
    <img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
    <img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>

CSS

.slider {
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.slider img {
    display: none;
    width: 100%;
    position: absolute;
}

.slider .active {
    display: inline-block;
}

.slider .sliding {
    display: inline-block;
}

JavaScript

var timer = setInterval(runSlide, 2000);

function runSlide() {
    // Slide each slider on the page.
    $(".slider").each(function (index, element) {
        // Get the elements involved in the slide.
        var numChildren = $(this).children().length;
        var activeChild = $(this).children(".active");
        var activeSlideTo = $(activeChild).attr("data-slide-to");
        var nextSlideTo = (parseInt(activeSlideTo) + 1) % numChildren;
        var nextChild = $(this).find("*[data-slide-to=" + nextSlideTo + "]");

        // Prepare for slide.
        $(activeChild).css("margin-left", "0%");
        $(nextChild).css("margin-left", "-100%");
        $(activeChild).addClass("sliding");
        $(nextChild).addClass("sliding");
        $(activeChild).removeClass("active");

        // Slide using CSS margin-left.
        $(activeChild).animate({"margin-left": "100%"}, 1000, function () {
            $(this).removeClass("sliding");
        });
        $(nextChild).animate({"margin-left": "0%"}, 1000, function () {
            $(this).addClass("active");
            $(this).removeClass("sliding");
        });
    });
}

Answer 2

Ended with following

setInterval(function() { 
  $('#sldvid1 > img:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#sldvid1');
},  3000);