Автовоспроизведение карусели совы в окне просмотра — нажмите триггер ⇐ Jquery

[Anonymous]

У меня проблема с каруселью с совой. Это карусель, где в данный момент, как и раньше, находится картинка, она должна на мгновение замереть, а затем перейти к следующему элементу. Я бы хотел, чтобы он запускался автоматически, когда элемент появляется в окне просмотра. Прямо сейчас я получаю сообщение об ошибке «Невозможно прочитать свойства неопределенного значения (читай «сверху»)». Где я ошибаюсь? Спасибо

Код: Выделить всё

var videoSlider = $('.owl-carousel');
videoSlider.owlCarousel({
loop: true,
margin: 0,
nav: true,
dots: true,
autoplay: false,
items: 1
});

videoSlider.on('translate.owl.carousel', function(e) {
$('.owl-item .item video').each(function() {
// pause playing video - after sliding
$(this).get(0).pause();
});
});

videoSlider.on('translated.owl.carousel', function(e) {
// check: does the slide have a video?
if ($('.owl-item.active').find('video').length !== 0) {
// play video in active slide
$('.owl-item.active .item video').get(0).play();
}

else {
setTimeout(function () {
$('.owl-next').trigger('click');}, 10);
}
});

$(".video-item").on('ended', myHandler)

function myHandler(ev) {
// there is no method 'next'
// so we will fake a click
$('.owl-next').trigger('click');
}

$.fn.isInViewport = function () {
let elementTop = $(this).offset().top;
let elementBottom = elementTop + $(this).outerHeight();

let viewportTop = $(window).scrollTop();
let viewportBottom = viewportTop + window.innerHeight; //  viewportTop && elementTop <  viewportBottom;
};

$(window).on('resize scroll', function() {
if ($('.owl-item.active').find('h4').isInViewport()) {
setTimeout(function () {
$('.owl-next').trigger('click');}, 1000);
} else {
// do something else
}
});

Код: Выделить всё

/* ---------------- */
/* HTML Reset Stuff */
/* ---------------- */
* {
box-sizing: border-box;
outline: none;
}

body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: Tahoma;
background: #222;
}

h1 {
color: white;
margin: 30px;
font-size: 25px;
}

button span {
color: white;
}

video {
max-width: 100%;
}

/* --------------- */
/* Content Wrapper */
/* --------------- */
.wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
transition: all .6s;
position: relative;
z-index: 1;
overflow: hidden;
}

/* ---------------------- */
/* OWL Active Slider Mask */
/* ---------------------- */
.slider-mask {
position: absolute;
width: 100%;
max-width: 400px;
height: 220px;
top: 0;
left: 50%;
z-index: 2;
pointer-events: none;
margin: 0 auto;
transform: translateX(-50%);
}

.slider-mask::before,
.slider-mask::after {
position: absolute;
z-index: 1;
left: 100%;
width: 100vw;
height: 100%;
background: rgba(34,34,34,.8);
display: block;
content: ' ';
}

.slider-mask::after {
left: auto;
right: 100%;
}

/* ----------------- */
/* Owl Styling Stuff */
/* ----------------- */
.owl-carousel {
width: 100%;
max-width: 400px;
position: relative;
z-index: 1;
}

.owl-stage-outer {
overflow: visible !important;
}

.owl-item {
width: 100%;
max-width: 400px;
height: 220px;
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
overflow: hidden;
}

.owl-nav {
font-size: 60px;
}

.owl-next {
float: right;
}

.owl-dots {
text-align: center;
width: 80%;
margin: -40px auto 0;
}

.owl-dot span{
background: white;
width: 15px;
height: 15px;
border-radius: 50%;
display: block;
margin: 0 4px;
}

.owl-dot.active span{
background:  red;
}

Код: Выделить всё

Owl Slider - Play / Stop / Continue HTML5 Video





[h4]1[/h4]






[h4]3[/h4]





[h4]5[/h4]

Подробнее здесь: https://stackoverflow.com/questions/783 ... ck-trigger