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" }
    });
});

score 14 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

score 1 · Answer 2 · answered Oct 13 '15 at 10:24

You can do using

 scroll      : {
            items           : null,     //  items.visible
            fx              : "scroll",      // its use animation of slide
            easing          : "swing",
            duration        : 500,
            pauseOnHover    : false,
            queue           : false,
            event           : "click",
            conditions      : null,
            onBefore        : null,
            onAfter         : null,
            onEnd           : null
        },

carouFredSel: How to make slides fade

2 Answers2