jquery - Owl Carousel 没有响应。仍然认为它应该在较小的屏幕上显示 3 "slides"

Question

我买了一个 html 模板来使用一些零碎的 wordpress 页面。然而 owl carousel 在桌面宽度上运行良好。但是，当我缩小浏览器并刷新页面时(让脚本重新计算宽度)。它仍然认为它是一个 ~1200px 浏览器的大小，因此例如在一个小屏幕上显示 3 个“幻灯片”，而不是 1 个 100% 宽度的幻灯片。

(即 33% 宽度的 3 列在桌面上看起来不错，33% 的 3 列在移动设备上看起来不行。)

我想我把它缩小到一个我认为包含轮播设置的特定模板文件。如果我把这个文件放在外面，轮播将无法工作，所以它会加载。我会认为“[450, 1]”是宽度+它显示的幻灯片数量。但这显然不起作用，改变它也不会有所作为。 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);




  });

Answer 1

您包含的第二个“完整代码”用于旋转 slider ，而不是 Owl Carousel 。您正在尝试使两件不起作用的事情起作用。使用 owl.owlCarousel 代码修改您需要的内容并访问 owl-carousel 文档以找到您要查找的内容。