(function ($) { const wdtCarouselWidgetHandler = function($scope, $) { setTimeout( function() { const $carouselItem = $scope.find('.wdt-carousel-holder'); const $moduleId = $carouselItem.data('id'); const $swiperItem = $carouselItem.find('.swiper'); const $swiperUniqueId = $swiperItem.attr('id'); const $swiperWrapper = $carouselItem.find('.swiper-wrapper'); const $carouselSettings = $swiperItem.data('settings'); if($carouselSettings === undefined) { return; } const $direction = ($carouselSettings['direction'] !== undefined) ? ($carouselSettings['direction']) : 'horizontal'; const $effect = ($carouselSettings['effect'] !== undefined) ? ($carouselSettings['effect']) : 'default'; // const $grab_cursor = ($effect == 'flip' || $effect == 'cards' || $effect == 'creative') ? true : false; const $free_mode = ($effect == 'free_mode') ? true : false; const $slides_to_show = ($carouselSettings['slides_to_show'] !== undefined) ? parseInt($carouselSettings['slides_to_show']) : 1; const $slides_to_scroll = ($carouselSettings['slides_to_scroll'] !== undefined) ? parseInt($carouselSettings['slides_to_scroll']) : 1; const $pagination = ($carouselSettings['pagination'] !== undefined) ? ($carouselSettings['pagination']) : ''; const $arrows = ($carouselSettings['arrows'] !== undefined) ? ($carouselSettings['arrows'] == 'yes') : false; const $speed = ($carouselSettings['speed'] !== undefined && $carouselSettings['speed'] != '') ? parseInt($carouselSettings['speed']) : 400; const $autoplay = ($carouselSettings['autoplay'] !== undefined) ? ($carouselSettings['autoplay'] == 'yes') : false; const $autoplay_speed = ($carouselSettings['autoplay_speed'] !== undefined && $carouselSettings['autoplay_speed'] != '') ? parseInt($carouselSettings['autoplay_speed']) : 20000; const $autoplay_direction = ($carouselSettings['autoplay_direction'] !== undefined) ? ($carouselSettings['autoplay_direction']) : ''; const $allow_touch = ($carouselSettings['allow_touch'] !== undefined) ? ($carouselSettings['allow_touch'] == 'yes') : true; const $loop = ($carouselSettings['loop'] !== undefined) ? ($carouselSettings['loop'] == 'yes') : false; const $centered_slides = ($carouselSettings['centered_slides'] !== undefined) ? ($carouselSettings['centered_slides'] == 'yes') : false; const $pause_on_interaction = ($carouselSettings['pause_on_interaction'] !== undefined) ? ($carouselSettings['pause_on_interaction'] == 'yes') : false; const $pause_on_mouseenter = ($carouselSettings['pause_on_mouseenter'] !== undefined) ? ($carouselSettings['pause_on_mouseenter'] == 'yes') : false; const $overflow_type = ($carouselSettings['overflow_type'] !== undefined) ? ($carouselSettings['overflow_type']) : ''; const $overflow_opacity = ($carouselSettings['overflow_opacity'] !== undefined) ? ($carouselSettings['overflow_opacity'] == 'yes') : false; const $unequal_height_compatability = ($carouselSettings['unequal_height_compatability'] === 'yes') ? true : false; const $space_between_gaps = $carouselSettings['space_between_gaps']; var $deviceMode = elementorFrontend.getCurrentDeviceMode(); if( $deviceMode = 'widescreen' ) { $deviceMode = 'desktop'; } const $space_between = $space_between_gaps[$deviceMode] ? $space_between_gaps[$deviceMode] : 0; // Initialize height if its vertical carousel if($direction == 'vertical') { const $height = parseInt($swiperItem.find('.swiper-slide:first .wdt-content-item').height(), 10) + 20; $swiperWrapper.css({'height':$height+'px'}); } // Overflow script if($overflow_type == 'left') { const $itemOffsetLeft = $carouselItem.offset().left; const $itemPadding = parseInt($carouselItem.parents('.elementor-widget-wrap').css("padding-left")); const $itemLeft = (parseFloat($itemOffsetLeft) - parseFloat($itemPadding)); const $itemWidth = $carouselItem.width(); const $itemTotalWidth = parseFloat($itemWidth) + parseFloat($itemLeft); $swiperItem.css('width', $itemTotalWidth); $swiperItem.css('left', -$itemLeft); } else if($overflow_type == 'right') { const $docWidth = $(document).width(); const $itemOffsetLeft = $carouselItem.offset().left; const itemOuterWidth = $carouselItem.outerWidth(); const $itemWidth = $carouselItem.width(); const itemRight = parseFloat($docWidth) - (parseFloat($itemOffsetLeft) + parseFloat(itemOuterWidth)); const $itemPadding = parseInt($carouselItem.parents('.elementor-widget-wrap').css("padding-right")); const $itemTotalWidth = parseFloat($itemWidth) + parseFloat(itemRight) - parseFloat($itemPadding); $swiperItem.css('width', $itemTotalWidth); } // Build swiper options const swiperOptions = { initialSlide: 0, simulateTouch: true, // roundLengths: true, keyboardControl: true, paginationClickable: true, autoHeight: false, // grabCursor: $grab_cursor, freeMode: $free_mode, allowTouchMove: $allow_touch, effect: $effect, fadeEffect: { crossFade: true }, coverflowEffect: { rotate: 30, slideShadows: false, }, cubeEffect: { slideShadows: false, }, slidesPerView: $slides_to_show, slidesPerGroup: $slides_to_scroll, loop: $loop, // loopFillGroupWithBlank: $loop, centeredSlides: $centered_slides, direction: $direction, speed: $speed, spaceBetween: $space_between } // Update breakpoints const $responsiveSettings = $carouselSettings['responsive']; const $responsiveData = {}; $.each($responsiveSettings, function (index, value) { $responsiveData[value.breakpoint] = { slidesPerView: value.toshow, slidesPerGroup: value.toscroll }; }); swiperOptions['breakpoints'] = $responsiveData; // Creative effects /* if( $effect == 'creative' ) { const $creativeType = $carouselSettings['effect_type']; if( $creativeType == 'type_1' ) { swiperOptions.creativeEffect = { prev: { shadow: true, translate: [0, 0, -400], }, next: { translate: ["100%", 0, 0], } } } else if( $creativeType == 'type_2' ) { swiperOptions.creativeEffect = { prev: { shadow: true, translate: ["-120%", 0, -500], }, next: { shadow: true, translate: ["120%", 0, -500], } } } else if( $creativeType == 'type_3' ) { swiperOptions.creativeEffect = { prev: { shadow: true, translate: ["-20%", 0, -1], }, next: { translate: ["100%", 0, 0], } } } else if( $creativeType == 'type_4' ) { swiperOptions.creativeEffect = { prev: { shadow: true, translate: [0, 0, -800], rotate: [180, 0, 0], }, next: { shadow: true, translate: [0, 0, -800], rotate: [-180, 0, 0], } } } else if( $creativeType == 'type_5' ) { swiperOptions.creativeEffect = { prev: { shadow: true, translate: ["-125%", 0, -800], rotate: [0, 0, -90], }, next: { shadow: true, translate: ["125%", 0, -800], rotate: [0, 0, 90], } } } else if( $creativeType == 'type_6' ) { swiperOptions.creativeEffect = { prev: { shadow: true, origin: "left center", translate: ["-5%", 0, -200], rotate: [0, 100, 0], }, next: { origin: "right center", translate: ["5%", 0, -200], rotate: [0, -100, 0], } } } } */ // Arrow pagination if ($arrows) { swiperOptions.navigation = { prevEl: '.wdt-arrow-pagination-prev-'+$moduleId, nextEl: '.wdt-arrow-pagination-next-'+$moduleId }; } // Other pagination if ($pagination != '') { if( $pagination == 'scrollbar' ) { swiperOptions.scrollbar = { el: '.wdt-swiper-scrollbar-'+$moduleId, type: $pagination, hide: true }; } else { swiperOptions.pagination = { el: '.wdt-swiper-pagination-'+$moduleId, type: $pagination, clickable: true }; } } // Autoplay direction $reversedirection = false; if($autoplay_direction == 'right') { $reversedirection = true; } // Autoplay if ($autoplay) { swiperOptions.autoplay = { delay: $autoplay_speed, disableOnInteraction: $pause_on_interaction, reverseDirection: $reversedirection, pauseOnMouseEnter: $pause_on_mouseenter, }; } const swiperGallery = new Swiper('#'+$swiperUniqueId, swiperOptions); if($direction == 'vertical' && $unequal_height_compatability) { swiperGallery.on('slideChangeTransitionStart', function () { const height = parseInt($swiperItem.find('.swiper-slide.swiper-slide-active .wdt-content-item').height(), 10) + 20; $swiperWrapper.animate({height:height}, 400); }); } // On slide change swiperGallery.on('slideChangeTransitionStart', function () { // Overflow Opacity if($overflow_opacity) { $scope.find('.swiper').css({'overflow': 'visible'}); $scope.find('.swiper-slide').css({'opacity': 0.5}); $scope.find('.swiper-slide.swiper-slide-active').css({'opacity': 1}); $scope.find('.swiper-slide.swiper-slide-active').nextAll('*:lt('+(+$slides_to_show-1)+')').css({'opacity': 1}); } }); // Overflow Opacity if($overflow_opacity) { $scope.find('.swiper').css({'overflow': 'visible'}); $scope.find('.swiper-slide').css({'opacity': 0.5}); $scope.find('.swiper-slide.swiper-slide-active').css({'opacity': 1}); $scope.find('.swiper-slide.swiper-slide-active').nextAll('*:lt('+(+$slides_to_show-1)+')').css({'opacity': 1}); } setTimeout( function() { $scope.find('.swiper-slide-duplicate .elementor-invisible').removeClass('elementor-invisible'); }, 400 ); }, 400 ); }; $(window).on('elementor/frontend/init', function () { elementorFrontend.hooks.addAction('frontend/element_ready/wdt-advanced-carousel.default', wdtCarouselWidgetHandler); elementorFrontend.hooks.addAction('frontend/element_ready/wdt-counter.default', wdtCarouselWidgetHandler); elementorFrontend.hooks.addAction('frontend/element_ready/wdt-icon-box.default', wdtCarouselWidgetHandler); elementorFrontend.hooks.addAction('frontend/element_ready/wdt-instagram.default', wdtCarouselWidgetHandler); elementorFrontend.hooks.addAction('frontend/element_ready/wdt-team.default', wdtCarouselWidgetHandler); elementorFrontend.hooks.addAction('frontend/element_ready/wdt-testimonial.default', wdtCarouselWidgetHandler); elementorFrontend.hooks.addAction('frontend/element_ready/wdt-image-box.default', wdtCarouselWidgetHandler); elementorFrontend.hooks.addAction('frontend/element_ready/wdt-events.default', wdtCarouselWidgetHandler); elementorFrontend.hooks.addAction('frontend/element_ready/wdt-donations.default', wdtCarouselWidgetHandler); }); })(jQuery);