I would like to Make one “coverflow effect” based on DIV. I decided to use bxslider and everything is working fine but I am not getting the centre "zoom effect" which I would like... You can see an example of what I want here.http://www.cssjquery.com/coverflow.php
I'm not sure how to get this effect on the bxslider. Would it be possible if I add extra class on each center LI ? Meaning, whichever "li" is moving to the center, I can add one class "active"... so I can make active transform:sceal etc.
Do you have any ideas on how I can make this happen? Or any other coverflow script you can recommend for this....
Thanks.
Demo
http://jsfiddle.net/cyber007/cbzmopzb/
Using the inbuilt API, like onSlideBefore, onSliderLoad in bxSlider, the animation can be achived..
jQuery(function($){
var slider = $('.bxslider').bxSlider({
minSlides: 1,
moveSlides:1,
maxSlides: 3,
pager:false,
controls:false,
slideWidth: 360,
slideMargin: 0,
onSlideBefore : function($slideElement, oldIndex, newIndex){ // your code here
$(".bxslider li").removeClass("active-slide")
$slideElement.next().addClass("active-slide")
},
onSliderLoad:function(index){
$(".bxslider li").eq(1+$(".bxslider .bx-clone").length/2).addClass("active-slide")
}
});