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