Carousel/slider - Replace fade-in effect by slide effect

Question

Hello – I'm using the code below (not mine) to fadein/fadeout images but I would like to replace the fade-in fade-out effect by a slide effect (similar to what we can see in slider plugings). I tried to replace the fade effect with ("slide", { direction: "left" }, 1000); and came up with the code below but syntax is incorrect. How could I get it working? Many thanks

ORIGINAL CODE WITH FADE-IN FADE-OU

var images = [

  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg',

];

var index = 0;

setInterval(change_up, 1000);

function change_up(){

  index = (index + 1 < images.length) ? index + 1 : 0;

  $('.block').fadeOut(300, function(){

    $(this).css('background-image', 'url('+ images[index] + ')')

    $(this).fadeIn(300);

  });
}

MODIFIED CODE WITH SLIDE EFFECT BUT NOT WORKING

var images = [

  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg',

];

var index = 0;

setInterval(change_up, 1000);

function change_up(){

  index = (index + 1 < images.length) ? index + 1 : 0;

  $('.block'). ("slide", { direction: "left" }, 1000);
 (, function(){

    $(this).css('background-image', 'url('+ images[index] + ')')

    $(this). ("slide", { direction: "left" }, 1000);

  });
}

Answer 1

If you're using jQuery UI, you can do it like this:

$('.block').show("slide", function() {
    // Do what do you want
});

Source: http://api.jqueryui.com/slide-effect/