Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Cool carousel effect Reply To: Cool carousel effect

#275965
Shikkediel
Participant

Here’s some fiddling based on your code, you can preload the images to make sure they’re ready to be shown when hovered:

$('[data-src]').each(function() {

  var img = new Image();
  img.src = $(this).data('src');
});

$('.carousel__item').mouseenter(function() {

  var value = $(this).attr('data-src');
  $('.carousel__bg img').fadeTo(0,0).attr('src', value).fadeTo(500,1);
})
.mouseleave(function() {
  $('.carousel__bg img').finish();
});

Edit – not sure (yet) where the text flicker comes from…