<div class="owl-carousel slider-section" id="owlslide">
<?php while(the_repeater_field('banner_slider')): ?>
<div class="item bestcenter vidHide" id="myVideo" <?php if (get_sub_field('banner_backgound_video') ){?> data-videosrc="<?php the_sub_field('banner_backgound_video'); ?>" <?php } ?> >
<?php if (get_sub_field('banner_backgound_video')) { /* ?><img class="loadingImg" src="<?php echo get_template_directory_uri(); ?>/assets/img/loading.gif"> <?php */ } ?>
<div class="preloader preloader-out" style="background-color: #FFFFFF"><div class="loader"></div></div>
<?php if(get_sub_field('banner_background_mobile_image')) { ?>
<img class="showinMobile" src='<?php the_sub_field('banner_background_mobile_image'); ?>'/>
<?php } ?>
<?php if(get_sub_field('banner_background_imag')) { ?>
<img class="hideinMobile" src='<?php the_sub_field('banner_background_imag'); ?>'/>
<?php } ?>
<div class='promo-container'>
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-6">
<div class="slider-left-content">
<h4><?php the_sub_field('banner_main_heading'); ?> <span><?php the_sub_field('banner_sub_heading'); ?></span></h4>
</div>
</div>
<div class="col-lg-3">
<div class="slider-right-btn">
<a href="<?php the_sub_field(' banner_button_link'); ?>" class="custom-btn"><?php the_sub_field('banner_button_text'); ?></a>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<script>
if ($('.slider-section').length > 0) {
var owl = $('.slider-section');
owl.owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: ["<img src='/wp-content/themes/parasailsiesta/assets/img/slider-arrow-left.png'>", "<img src='/wp-content/themes/parasailsiesta/assets/img/slider-arrow-right.png'>"],
dots: true,
items: 1
})
// owl.on('initialize.owl.carousel initialized.owl.carousel ' +
// 'initialize.owl.carousel initialize.owl.carousel ' +
// 'resize.owl.carousel resized.owl.carousel ' +
// 'refresh.owl.carousel refreshed.owl.carousel ' +
// 'update.owl.carousel updated.owl.carousel ' +
// 'drag.owl.carousel dragged.owl.carousel ' +
// 'translate.owl.carousel translated.owl.carousel ' +
// 'to.owl.carousel changed.owl.carousel', function( event ){
// console.log( event.type +' TESTING ');
// $('.preloader').hide();
// });
owl.on('refreshed.owl.carousel ', function( event ){
console.log( event.type +' TESTING ');
setTimeout(() => {
$('.preloader').hide();
}, 2000);
});
// Trigger function on owl.carousel Refreshed/Loaded
owl.trigger('refreshed.owl.carousel');
if (!isMobile(1367)) {
$('.owl-item .item').each(function () {
var attr = $(this).attr('data-videosrc');
if (typeof attr !== typeof undefined && attr !== false) {
console.log('hit');
var videosrc = $(this).attr('data-videosrc');
$(this).prepend('<video muted><source src="' + videosrc + '" type="video/mp4"></video>');
$('.owl-item video').attr('autoplay', true).attr('loop', true).attr('poster','https://www.parasailsiesta.com/wp-content/uploads/2018/11/slider-1-min.jpg');
}
});
}
function isMobile(width) {
if (width == undefined) {
width = 719;
}
if (window.innerWidth <= width) {
return true;
} else {
return false;
}
}
$('.lazy').Lazy({
// your configuration goes here
scrollDirection: 'vertical',
effect: 'fadeIn',
visibleOnly: true,
onError: function(element) {
console.log('error loading ' + element.data('src'));
}
});
(function($) {
$.Lazy('.vidHide', ['audio', 'video'], function(element, response) {
// this plugin will automatically handle '<audio>' and '<video> elements,
// even when no 'data-loader' attribute was set on the elements
});
})(window.jQuery || window.Zepto);
}
</script>
