this.arr = [
'carousel_1.webp',
'carousel_2.webp',
'carousel_3.webp',
'carousel_4.webp',
'carousel_5.webp',
'carousel_6.webp',
'carousel_7.webp',
'carousel_8.webp',
'carousel_9.webp',
'carousel_10.webp',
];
$(function(){
var _slide = $('.bxslider_root');
var _ul = _slide.find('.bxslider > ul');
_ul.children('li').each(function(i,elem){
$(this).attr('data-num',i);
});
var m = _slide.find('.bxslider > ul > li').length;
_ul.bxSlider({
//startSlide: 1,
auto: true,
//preloadImages: 'all',
maxSlides: 2,
easing: 'easeOutExpo',
speed: 1000,
onSliderLoad: function(cr){
_ul.children('li[data-num="' + (cr) + '"]').addClass('active');
_slide.find('.bx-viewport > ul').css({
width: m * 100 + 415 + '%'
});
_ul.animate({
opacity: 1
},500);
},
onSlideBefore: function($slideElement, oldIndex, newIndex){
_ul.children('li').removeClass('active').animate({
opacity: 0.7
},300);
},
onSlideAfter: function($slideElement, oldIndex, newIndex){
_slide.find('.bx-viewport > ul > li[data-num="' + newIndex + '"]').addClass('active').animate({
opacity: 1
},300);
}
}
);
});