我买了一个html模板，用于wordpress页面的一些零碎。但猫头鹰旋转木马在桌面宽度上工作正常。但是，当我缩小浏览器并刷新页面时（脚本重新计算宽度）。它仍然认为它是一个~1200px浏览器的大小，因此显示例如3＆＃39;幻灯片＆＃39;在小屏幕上彼此相邻，而不是100％宽度的1个幻灯片。
（即3列33％宽度在桌面上看起来很好，3列33％在移动设备上没有。）
我认为我已将其缩小为一个特定的模板文件，我认为该文件包含轮播的设置。如果我把这个文件留在旋转木马不会工作，所以它加载。我原以为＆＃34; [450,1]＆＃34;是宽度+显示的幻灯片数量。但这显然不起作用，改变它也不会有所作为。 div也被称为funfacts-carousel。这段代码不完整吗？我能做些什么才能找到。如果需要我可以链接更多的代码，但我不知道哪个。
我正在谈论的部分代码：
//OWLCAROUSEL FUNFACT CAROUSEL
var owl = $("#funfacts-carousel");
owl.owlCarousel({
itemsCustom : [
[0, 1],
[450, 1],
[600, 2],
[700, 4],
[1000, 4],
[1200, 4],
[1600, 4]
],
navigation : false,
navigationText : ['<i class="pe-4x pe-7s-angle-left pe-border"></i>','<i class="pe-4x pe-7s-angle-right pe-border"></i>'],
});
文件中的完整代码：
jQuery(document).ready(function($) {
'use strict';
//REV SLIDER
jQuery('.tp-banner').show().revolution(
{
dottedOverlay:"none",
delay:9000,
startwidth:1170,
startheight:700,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:5,
navigationType:"none",
navigationArrows:"solo",
navigationStyle:"preview1",
touchenabled:"on",
onHoverStop:"on",
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
keyboardNavigation:"on",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
fullWidth:"off",
fullScreen:"on",
spinner:"spinner0",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
forceFullWidth:"off",
fullScreenAlignForce:"off",
minFullScreenHeight:"400",
hideThumbsOnMobile:"off",
hideNavDelayOnMobile:1500,
hideBulletsOnMobile:"off",
hideArrowsOnMobile:"off",
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
fullScreenOffsetContainer: ".header"
});
//SMOOTH SCROLL EFFECT
$('[data-toggle="elementscroll"]').on("click", function(){
'use strict';
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({ scrollTop: target.offset().top }, 1000);
return false;
}
}
});
//COUNTDOWN TIMER
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#countdown').countdown({until: new Date(2017, 5-1, 16)}); // enter event day
$('#removeCountdown').toggle(
function() {
$(this).text('Re-attach');
$('#defaultCountdown').countdown('destroy');
},
function() {
$(this).text('Remove');
$('#defaultCountdown').countdown({until: newYear});
}
);
//MAGNIFIC POPUP LOAD CONTENT VIA AJAX
$('.html-popup').magnificPopup({type: 'ajax'});
//MAGNIFIC POPUP IMAGE
$('.image-popup').magnificPopup({
type:'image',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
});
//LOAD MORE
$('#list-speaker li:lt(4)').show();
$('#loadmore').on("click", function () {
$('#list-speaker li:lt(8)').fadeIn();
$('#list-speaker li:lt(8)').show();
});
//FAQ TOGGLE
$('.faqs dd').hide();
$('.faqs dt').on({
click : function(){ $(this).next().slideToggle('normal'); },
mouseenter : function(){ $(this).addClass('hover'); },
mouseleave : function(){ $(this).removeClass('hover'); }
});
//OWLCAROUSEL HOTEL CAROUSEL
var owl = $("#hotel-carousel");
owl.owlCarousel({
autoPlay: false,
itemsCustom : [ [0, 1], [450, 1], [600, 3], [700, 3], [1000, 3], [1200, 3], [1600, 3] ],
pagination : false,
navigation : true,
navigationText : ['<i class="pe-4x pe-7s-angle-left pe-border"></i>','<i class="pe-4x pe-7s-angle-right pe-border"></i>'],
});
//OWLCAROUSEL FUNFACT CAROUSEL
var owl = $("#funfacts-carousel");
owl.owlCarousel({
itemsCustom : [
[0, 1],
[450, 1],
[600, 2],
[700, 4],
[1000, 4],
[1200, 4],
[1600, 4]
],
navigation : false,
navigationText : ['<i class="pe-4x pe-7s-angle-left pe-border"></i>','<i class="pe-4x pe-7s-angle-right pe-border"></i>'],
});
//OWLCAROUSEL PRICE TABLE CAROUSEL
var owl = $("#price-carousel");
owl.owlCarousel({
itemsCustom : [
[0, 1],
[450, 1],
[600, 2],
[700, 3],
[1000, 3],
[1200, 3],
],
pagination : false,
navigation : true,
navigationText : ['<i class="pe-4x pe-7s-angle-left pe-border"></i>','<i class="pe-4x pe-7s-angle-right pe-border"></i>'],
});
//OWLCAROUSEL TESTIMONIAL CAROUSEL
var owl = $("#testimonial-carousel");
owl.owlCarousel({
navigation : false, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
transitionStyle : "fade"
});
//OWLCAROUSEL SPONSORS CAROUSEL
var owl = $("#sponsors-carousel");
owl.owlCarousel({
autoPlay: false,
itemsCustom : [
[0, 1],
[450, 1],
[600, 3],
[700, 3],
[1000, 3],
[1200, 5],
[1600, 5]
],
pagination : false,
navigation : true,
navigationText : ['<i class="pe-4x pe-7s-angle-left pe-border"></i>','<i class="pe-4x pe-7s-angle-right pe-border"></i>'],
});
// FUNFACTS
$('.number').counterUp({
delay: 10,
time: 3000
});
//FIX HOVER EFFECT ON IOS DEVICES
document.addEventListener("touchstart", function(){}, true);
});
答案 0 :(得分：0)
您包括的第二个“完整代码”用于旋转滑块，而不是猫头鹰轮播。您正在尝试使两件事无法正常工作。使用owl.owlCarousel代码修改所需内容，并访问owl-carousel文档以查找所需内容。