Я поместил карусель совы на свой веб-сайт html, когда я загружаю свою страницу html, карусель совы не движется сам по себе. карусель совы, которая выглядит следующим образом:
if ($().owlCarousel) {
$('.owl-carousel').each(function() {
var $carousel = $(this);
$carousel.find('> *').each(function (i) {
$(this).attr('data-index', i);
});
var data = $carousel.data();
var loop = data.loop ? data.loop : false,
margin = (data.margin || data.margin === 0) ? data.margin : 30,
nav = data.nav ? data.nav : false,
navPrev = data.navPrev ? data.navPrev : '<i class="fa fa-angle-left">',
navNext = data.navNext ? data.navNext : '<i class="fa fa-angle-right">',
dots = data.dots ? data.dots : false,
themeClass = data.themeclass ? data.themeclass : 'owl-theme',
center = data.center ? data.center : false,
items = data.items ? data.items : 4,
autoplay = data.autoplay ? data.autoplay : false,
responsiveXs = data.responsiveXs ? data.responsiveXs : 1,
responsiveSm = data.responsiveSm ? data.responsiveSm : 2,
responsiveMd = data.responsiveMd ? data.responsiveMd : 3,
responsiveLg = data.responsiveLg ? data.responsiveLg : 4,
draggable = (data.draggable === false) ? data.draggable : true,
syncedClass = (data.syncedClass) ? data.syncedClass : false,
filters = data.filters ? data.filters : false;
if (filters) {
$carousel.after($carousel.clone().addClass('owl-carousel-filter-cloned'));
$(filters).on('click', 'a', function( e ) {
//processing filter link
e.preventDefault();
if ($(this).hasClass('selected')) {
return;
}
var filterValue = $( this ).attr('data-filter');
$(this).siblings().removeClass('selected active');
$(this).addClass('selected active');
//removing old items
for (var i = $carousel.find('.owl-item').length - 1; i >= 0; i--) {
$carousel.trigger('remove.owl.carousel', [1]);
};
//adding new items
var $filteredItems = $($carousel.next().find(' > ' +filterValue).clone());
$filteredItems.each(function() {
$carousel.trigger('add.owl.carousel', $(this));
$(this).addClass('scaleAppear');
});
$carousel.trigger('refresh.owl.carousel');
//reinit prettyPhoto in filtered OWL carousel
if ($().prettyPhoto) {
$carousel.find("a[data-gal^='prettyPhoto']").prettyPhoto({
hook: 'data-gal',
theme: 'facebook' /* light_rounded / dark_rounded / light_square / dark_square / facebook / pp_default*/
});
}
});
} //filters
$carousel.owlCarousel({
loop: loop,
margin: margin,
nav: nav,
autoplay: autoplay,
dots: dots,
themeClass: themeClass,
center: center,
navText: [navPrev,navNext],
mouseDrag: draggable,
touchDrag: draggable,
items: items,
responsive: {
0:{
items: responsiveXs
},
767:{
items: responsiveSm
},
992:{
items: responsiveMd
},
1200:{
items: responsiveLg
}
},
})
.addClass(themeClass);
if(center) {
$carousel.addClass('owl-center');
}
$window.on('resize', function() {
$carousel.trigger('refresh.owl.carousel');
});
//topline two synced carousels
if($carousel.hasClass('owl-news-slider-items') && syncedClass) {
$carousel.on('changed.owl.carousel', function(e) {
var indexTo = loop ? e.item.index+1 : e.item.index;
$(syncedClass).trigger('to.owl.carousel', [indexTo]);
})
}
});
}
.owl-carousel {
display: none;
position: relative;
-webkit-tap-color-main-color: transparent;
-ms-touch-action: manipulation;
touch-action: manipulation;
width: 100%;
z-index: 1;
}
.owl-carousel .owl-stage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-ms-touch-action: pan-Y;
}
.owl-carousel.owl-shadow-items .owl-stage {
padding-bottom: 11px;
padding-top: 11px;
}
.owl-carousel .owl-stage:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.owl-carousel .owl-stage-outer {
margin-left: -10px;
margin-right: -10px;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
position: relative;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
float: left;
min-height: 1px;
position: relative;
-webkit-tap-color-main-color: transparent;
-webkit-touch-callout: none;
}
.owl-carousel .owl-item .box-shadow {
height: 100%;
}
.owl-carousel .owl-item img {
-webkit-transform-style: preserve-3d;
}
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel.owl-loaded {
display: block;
}
.owl-carousel.owl-loading {
display: block;
opacity: 0;
}
.owl-carousel.owl-hidden {
opacity: 0;
}
.owl-carousel.owl-refresh .owl-item {
display: none;
}
.owl-carousel.owl-drag .owl-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel.owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.owl-carousel.owl-rtl {
direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel" data-responsive-lg="3" data-responsive-md="2" data-responsive-sm="2" data-responsive-xs="1" data-nav="true" data-loop="true"></div>
теперь, когда я загружаю свою html страницу, карусель совы не движется сама по себе, я должен использовать курсор для перетаскивания и смотрите следующее фото, может кто-нибудь подскажите пожалуйста, что может быть не так. заранее спасибо