删除 StageEdge在 owlCarus 中的填充以一定宽度

Question

>有人知道我可以访问 owlCarousel 中的 stagePadding 属性吗，这样如果窗口宽度小于 x px，我可以将其设置为 0..？所以，像这样：

function() {
    $('.owl-carousel').owlCarousel({
        margin: 10,
        loop: true,
        items: 1,
        stagePadding: 200,
        nav: true,
        dots: true,
        dotsData: true,
        navText : ["<span>←</span>","<span>→</span>"],
        dotsContainer: '.owl-dots-container'
    });
    if ( $(window).width() < 1000 ) {
        $('.owl-carousel').stagePadding = 0;
    } else {
        $('.owl-carousel').stagePadding = 200;
    }
});

Answer 1

OwlCarousel有一个方便的选项。非常简单 - 只需添加"响应式"选项并输入必要断点的宽度(0、1000 等...(：

    $('.owl-carousel').owlCarousel({
        margin: 10,
        loop: true,
        items: 1,
        nav: true,
        dots: true,
        dotsData: true,
        navText : ["<span>←</span>","<span>→</span>"],
        dotsContainer: '.owl-dots-container',
        responsive: {
            0: {
                stagePadding: 0
            },
            1000: {
                stagePadding: 200
            }
        }
    });

Answer 2

你可以这样制作代码：

function() {
  if ($(window).width() < 1000) {
    $('.owl-carousel').owlCarousel({
      margin: 10,
      loop: true,
      items: 1,
      stagePadding: 0,
      nav: true,
      dots: true,
      dotsData: true,
      navText: ["<span>←</span>", "<span>→</span>"],
      dotsContainer: '.owl-dots-container'
    });
  } else {
    $('.owl-carousel').owlCarousel({
      margin: 10,
      loop: true,
      items: 1,
      stagePadding: 200,
      nav: true,
      dots: true,
      dotsData: true,
      navText: ["<span>←</span>", "<span>→</span>"],
      dotsContainer: '.owl-dots-container'
    });
  }
});

Answer 3

也可以做这样的事情吗？

$(function(){
    let $owlCarouselContainer = $('.owl-carousel');
    let windowWidth = $(window).width();
    let owlCarouselProps = {
      margin: 10,
      loop: true,
      items: 1,
      stagePadding: windowWidth < 1000 ? 0 : 200,
      nav: true,
      dots: true,
      dotsData: true,
      navText: ["<span>←</span>", "<span>→</span>"],
      dotsContainer: '.owl-dots-container'
    };
    $owlCarouselContainer.owlCarousel(owlCarouselProps);
});

Answer 4

您可以声明一个变量，然后根据您的条件设置其值。

var stgPadding;
 if ( $(window).width() < 1000 ) {
                stgPadding = 0;
            } else {
                stgPadding = 200;
            }
function() {
            $('.owl-carousel').owlCarousel({
                margin: 10,
                loop: true,
                items: 1,
                stagePadding: stgPadding,
                nav: true,
                dots: true,
                dotsData: true,
                navText : ["<span>←</span>","<span>→</span>"],
                dotsContainer: '.owl-dots-container'
            });
        });