如何显示我的猫头鹰传送带第二部分的一小部分？

Question

我致力于开发第一个移动网站。因此，在移动设备上，我只显示猫头鹰轮播中的一项，但我只想显示第二项的一小部分，以向作为滑块的用户显示，但我不能。我已经准备好了：这就是代码：

//JS
$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:false,
    margin:1,
    nav:false,
    dots:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  });
});

//CSS
#scrollerParent {
    width: 718px;
    position: absolute;
    top: 295px;
    left: 36px;
}

#articles-scroll {
    width: 718px;
}

.article {
    background-color: #FFFFFF;
    width: 342px;
    height: 629.27px;
}

.article img {
    width: 342px;
}

.titreArticle {
    margin: 0;
    position: absolute;
    top: 230.07px;
    left: 23.3px;
    color: #20335D;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
}

.corpsArticle {
    margin: 0;
    position: absolute;
    top: 366.07px;
    left: 23.3px;
    color: #888888;
    font-weight: normal;
    font-size: 18px;
    line-height: 30px;
}

.article span {
    position: absolute;
    top: 563.47px;
    left: 23.3px;
    font-size: 14px;
    color: #888888;
    line-height: 15px;
}

第一个版本是Operational，它可以工作，我可以滑动，但是我想显示第二个项目的一部分，例如这个版本：要获得它，我只需更改：

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:false,
    margin:1,
    nav:false,
    dots:true,
    responsive:{
        0:{
            items:2 //I just change this
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  });
});

但是那是行不通的。当我尝试滑动时，我被卡在第一项上。那是幻灯片，但它回到第一项，而不是停留在第二项。我认为我的第一个版本的JS / jQuery不错，但CSS可能不是。我也知道我们可以用一些jQuery代码修改CSS，但我不知道如何。谢谢您的帮助

Answer 1

我认为您正在寻找的是stagPadding：

您可以将代码更改为此：

$('.owl-carousel').owlCarousel({
  stagePadding: 50, // Or any number you would like
  loop: false,
  margin: 1,
  nav: false,
  dots: true,
  responsive: {
    0: {
      items: 2 //I just change this
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
});