3

I am using the plugin jCarousel (http://sorgalla.com/projects/jcarousel/) and rather than the images slide in (like in the "Carousel with autoscrolling" demo)

I would like the images to fade in. The usage is a jCarousel that auto scrolls and only shows one element at a time. But I looked at Cycle plugin but it didn't seem to work with my scenario as the element I want to show contains text and an image.

Thanks if anyone can help with this.

Phil

6 Answers 6

6

Try this:

var jcarousel = $('#yourContainer');

    jcarousel.jcarousel({
        animation: {
            duration: 0 // make changing image immediately
        }
    });

    // make fadeIn effect
    jcarousel.on('jcarousel:animate', function (event, carousel) {
        $(carousel._element.context).find('li').hide().fadeIn(1000);
    });
1
  • how would you do an additional fadeout effect / crossfade?
    – flaudre
    Sep 2, 2016 at 8:24
6

You can simulate a fading effect even though jCarousel knows only to scroll the slides:

$('#yourContainer').jcarousel({
    visible: 1,
    scroll: 1, 
    itemLoadCallback: {
        onBeforeAnimation: mycarousel_fadeOut,
        onAfterAnimation: mycarousel_fadeIn
    }
});

function mycarousel_fadeOut(carousel) {
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeOut(); 
}

function mycarousel_fadeIn(carousel) {
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeIn(); 
}

This way you fade out the container before the scrolling animation begins and fade it back in after it's finished without seeing anything else than the fading effect.

2
  • 2
    Hi, this solution seems to be the right approach, but doesn't work at all - I got an "unrecognized expression: #" error when using this, the JCcontainerID stays empty.
    – cukabeka
    Mar 16, 2012 at 10:09
  • 2
    I got this error "unrecognized expression: #" too! The solution is to use $(carousel.clip.context).fadeOut(); and $(carousel.clip.context).fadeIn(); instead.
    – Jekis
    May 6, 2013 at 11:51
2

Changing the functions to this works, sort of (you may still see the scroll too):

function mycarousel_fadeOut(carousel) { 
   var JCcontainer = carousel.clip.context; 
   $(JCcontainer).fadeOut(); 
} 

function mycarousel_fadeIn(carousel) { 
   var JCcontainer = carousel.clip.context; 
   $(JCcontainer).fadeIn(); 
} 
1
var mycarousel_fadeOut = function(carousel, state) {
    if (state !== "init") {
        $(carousel.clip.context).find('img').fadeOut(800);
    }
};

var mycarousel_fadeIn = function(carousel, state) {
    if (state !== "init") {
        $(carousel.clip.context).find('img').fadeIn(800);
    }
};
0
1

For the 0.3.x jCarousel version I went with this:

   var carousel = $('.jcarousel').jcarousel({
      list        : '.items',
      items       : '.i',
      wrap        : 'both', // for good measure
      animation: {
          duration: 0 // swap slides immediately
      }
   }).jcarouselAutoscroll({
      interval: 1000 * 5,
      target: '+=1',
      autostart: true
   });

   // fade hack
   carousel.jcarousel('items').hide();
   carousel.jcarousel('first').show();
   carousel.on('jcarousel:visiblein', function(event, carousel) {
      $(event.target).fadeIn();
   });
   carousel.on('jcarousel:visibleout', function(event, carousel) {
      $(event.target).fadeOut();
      carousel._trigger('animateend'); // the event doesn't fire when items are positioned absolutely (so autoscroll wouldn't work), fire manually
   });

some css to make it work:

   .items {height: 450px;}
   .i     {position: absolute;}
2
  • The CSS to make it work is required. The fade in effect will not work without it.
    – Michael
    May 7, 2014 at 22:17
  • 1
    Yes, otherwise the slides (.i) won't be on top (overlap) each other.
    – Gappa
    May 12, 2014 at 11:22
0

The Cycle plugin will work with text and an image. Scroll down to the Callbacks section on this page to see Cycle working with text.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.