carouFredSel: How to make slides fade

Question

I am using this code with CarouFredSel it is working fine, now I want to make it fade instead of slide left to right.

jQuery(document).ready(function($) {
    $("#slider_home").carouFredSel({
        width : "100%",
        height : "auto",
        responsive : true,
        circular : true,
        infinite : false,
        auto : false,
        swipe : { onTouch : true, onMouse : true },
        prev : { button : "#sl-prev", key : "left"},
        next : { button : "#sl-next", key : "right" }
    });
});

Answer 1

You need to set the scroll fx property when you set up your carousel.

jQuery(document).ready(function($) {
    $("#slider_home").carouFredSel({
        width : "100%",
        height : "auto",
        responsive : true,
        infinite  : false,
        auto : false,
        swipe : { onTouch : true, onMouse : true },
        prev : { button : "#sl-prev", key : "left"},
        next : { button : "#sl-next", key : "right" },
        scroll : { fx : "crossfade" },
        items: 1
    });
});

From the carouFredSel Advanced Configuration documetation:

scroll { fx : "scroll" }

Indicates which effect to use for the transition.

Possible values: "none", "scroll", "directscroll", "fade", "crossfade", "cover", "cover-fade", "uncover" or "uncover-fade".

There is also a demo of this on their site.