126 lines
4.4 KiB
JavaScript
126 lines
4.4 KiB
JavaScript
theme.CarouselBrands = (function() {
|
|
|
|
function CarouselBrands(container) {
|
|
this.$container = $(container);
|
|
|
|
//var sectionId = this.$container.attr('data-section-id');
|
|
|
|
//this.settings = {};
|
|
|
|
this.namespace = '.carousel-brands';
|
|
|
|
this.onLoad();
|
|
};
|
|
|
|
CarouselBrands.prototype = $.extend({}, Section.prototype, CarouselBrands.prototype, {
|
|
onLoad: function() {
|
|
var $carousel = this.$container.find('[data-js-carousel]'),
|
|
$slick = $carousel.find('[data-js-carousel-slick]');
|
|
|
|
if($slick.length) {
|
|
var $prev = $carousel.find('[data-js-carousel-prev]'),
|
|
$next = $carousel.find('[data-js-carousel-next]'),
|
|
$arrows = $prev.add($next),
|
|
count = +$carousel.attr('data-count'),
|
|
autoplay = $carousel.attr('data-autoplay') === 'true' ? true : false,
|
|
speed = +$carousel.attr('data-speed'),
|
|
infinite = $carousel.attr('data-infinite') === 'true' ? true : false,
|
|
arrows = $carousel.attr('data-arrows') === 'true' ? true : false,
|
|
bullets = $carousel.attr('data-bullets') === 'true' ? true : false;
|
|
|
|
this.$slick = $slick;
|
|
|
|
if(arrows) {
|
|
function arrowsPosition() {
|
|
var max_height = 0;
|
|
|
|
$slick.find('.carousel__item').each(function () {
|
|
max_height = Math.max(max_height, $(this).innerHeight());
|
|
});
|
|
|
|
$arrows.css({ top: max_height/2 });
|
|
};
|
|
|
|
$window.on('theme.resize.carousel-brands', arrowsPosition);
|
|
}
|
|
|
|
$slick.on('init', function() {
|
|
if(arrows) {
|
|
arrowsPosition();
|
|
}
|
|
|
|
$carousel.removeClass('invisible');
|
|
|
|
theme.Loader.unset($carousel.parent());
|
|
});
|
|
|
|
$slick.slick({
|
|
lazyLoad: false,
|
|
arrows: arrows,
|
|
prevArrow: $prev,
|
|
nextArrow: $next,
|
|
dots: bullets,
|
|
dotsClass: 'slick-dots d-flex flex-wrap flex-center list-unstyled mt-40',
|
|
adaptiveHeight: true,
|
|
autoplay: autoplay,
|
|
autoplaySpeed: speed,
|
|
infinite: infinite,
|
|
slidesToShow: count,
|
|
slidesToScroll: count,
|
|
rtl: theme.rtl,
|
|
responsive: [
|
|
{
|
|
breakpoint: theme.breakpoints.values.xl,
|
|
settings: {
|
|
slidesToShow: 5,
|
|
slidesToScroll: 5
|
|
}
|
|
},
|
|
{
|
|
breakpoint: theme.breakpoints.values.lg,
|
|
settings: {
|
|
slidesToShow: 4,
|
|
slidesToScroll: 4
|
|
}
|
|
},
|
|
{
|
|
breakpoint: theme.breakpoints.values.md,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3
|
|
}
|
|
},
|
|
{
|
|
breakpoint: theme.breakpoints.values.sm,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
if(theme.is_loaded) {
|
|
theme.ImagesLazyLoad.update();
|
|
}
|
|
}
|
|
},
|
|
onUnload: function() {
|
|
this.$container.off(this.namespace);
|
|
|
|
if(this.$slick) {
|
|
this.$slick.slick('destroy').off();
|
|
this.$slick = null;
|
|
|
|
$window.unbind('theme.resize.carousel-brands');
|
|
}
|
|
}
|
|
});
|
|
|
|
return CarouselBrands;
|
|
})();
|
|
|
|
$(function() {
|
|
theme.sections.register('carousel-brands', theme.CarouselBrands);
|
|
});
|