0

I tried changing the link Demo from fade to slideIn and slideOut but was not able to achieve as i would like to use a slideIn and slideOut style for a project, i am currently working on.

If anyone can help me guide through this, would be a great help.

[jsfiddle.net/chetanmani/6sj8x95y/]

Thank you.

Target
  • 199
  • 4
  • 19

1 Answers1

1

here you go : Fiddle

 /**
 * Fade-cycles elements with class 'banner'
 */
$(document).ready(function() {

    var delay = 3000, fade = 1000;
    var banners = $('.banner');
    var len = banners.length;
    var i = 0;

    setTimeout(cycle, delay);

    function cycle() {
        $(banners[i%len]).slideUp(fade, function() {
            $(banners[++i%len]).slideDown(fade, function() {
                setTimeout(cycle, delay);   
            });
        });
    }

});

so its using the jquery sildeUp and slideDown

for slide right to left in a cycle here is the fiddle: 

function cycle() {
    $(banners[i % len]).hide("slide", function(){
         $(banners[++i % len]).show("slide", {
            direction: "left"
        });
        setTimeout(cycle, delay);
    });
}
Hassene Benammou
  • 369
  • 2
  • 4
  • 11
  • This works for me,just a quick question can it be done side ways – Target Sep 10 '14 at 01:21
  • I tried the following code problem is it only slides left but wont work in a cycle.code is $(document).ready(function() { var delay = 3000, fade = 1000; var banners = $('.banner'); var len = banners.length; var i = 0; setTimeout(cycle, delay); function cycle() { $(banners[i%len]).hide("slide", { direction: "left" });(fade, function() { $(banners[++i%len]).show("slide", { direction: "right" });(fade, function() { setTimeout(cycle, delay); }); }); } }); – Target Sep 10 '14 at 02:03
  • can you paste a fiddle? – Hassene Benammou Sep 10 '14 at 07:36
  • here is a fiddle with slide left and right in cycle http://jsfiddle.net/aps9mozd/ – Hassene Benammou Sep 10 '14 at 07:54
  • is it possible to add a slider bullet to these div it is display: block. – Target Sep 12 '14 at 06:15