owlCarousel 无法正常工作,它不会移动,我也无法推进页面
the owlCarousel does not work properly, it does not move and I cannot advance the page either
旋转木马没有移动,它已经初始化,检查库是否井然有序;但即使这样它也不会自己移动,也不会通过触摸按钮移动。
I have the latest version of the owlCarousel and jquery library.
我尝试更新库,也尝试使用最小库和普通库。我没有取得任何进展。
PD:我用的是波尔图主题
scripts imports
CSS imports
Carousel Image
元素轮播:
<div class="owl-carousel owl-theme dots-morphing">
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Aliexpress.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Amazon.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Boxycharm.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Carters.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Colourpop.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Ebay.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Etsy.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/HotTopic.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Ipsy.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Macys.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Rakuten.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Shein.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/VictoriaSecrets.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Walmart.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Wish.png')}}" alt="">
</div>
</div>
初始化:
(function ($) {
'use strict';
/*
Carousel
*/
$('.owl-carousel').owlCarousel({
autoplay: true,
autoPlaySpeed: 5000,
autoPlayTimeout: 5000,
autoplayHoverPause: true,
loop: true,
navText: [],
responsive:{
768:{
items: 5,
}
},
margin: 10,
autoWidth: false,
items: 5,
rtl: ($('html').attr('dir') == 'rtl') ? true : false
});
/*
Videos
*/
$('#videos').owlCarousel({
items: 1,
merge: true,
loop: true,
margin: 10,
video: true,
lazyLoad: true,
center: true,
responsive: {
480: {
items: 2
},
600: {
items: 4
}
},
rtl: ($('html').attr('dir') == 'rtl') ? true : false
});
}).apply(this, [jQuery]);
你的初始化问题jquery '(function ($)' => '$(function()'
$(function(){
'use strict';
//your code here
});
旋转木马没有移动,它已经初始化,检查库是否井然有序;但即使这样它也不会自己移动,也不会通过触摸按钮移动。
I have the latest version of the owlCarousel and jquery library.
我尝试更新库,也尝试使用最小库和普通库。我没有取得任何进展。
PD:我用的是波尔图主题
scripts imports
CSS imports
Carousel Image
元素轮播:
<div class="owl-carousel owl-theme dots-morphing">
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Aliexpress.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Amazon.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Boxycharm.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Carters.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Colourpop.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Ebay.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Etsy.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/HotTopic.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Ipsy.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Macys.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Rakuten.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Shein.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/VictoriaSecrets.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Walmart.png')}}" alt="">
</div>
<div>
<img class="img-fluid" src="{{ asset('img/shipex/carrucel/Wish.png')}}" alt="">
</div>
</div>
初始化:
(function ($) {
'use strict';
/*
Carousel
*/
$('.owl-carousel').owlCarousel({
autoplay: true,
autoPlaySpeed: 5000,
autoPlayTimeout: 5000,
autoplayHoverPause: true,
loop: true,
navText: [],
responsive:{
768:{
items: 5,
}
},
margin: 10,
autoWidth: false,
items: 5,
rtl: ($('html').attr('dir') == 'rtl') ? true : false
});
/*
Videos
*/
$('#videos').owlCarousel({
items: 1,
merge: true,
loop: true,
margin: 10,
video: true,
lazyLoad: true,
center: true,
responsive: {
480: {
items: 2
},
600: {
items: 4
}
},
rtl: ($('html').attr('dir') == 'rtl') ? true : false
});
}).apply(this, [jQuery]);
你的初始化问题jquery '(function ($)' => '$(function()'
$(function(){
'use strict';
//your code here
});