Javascript 如何显示我的猫头鹰转盘第二项的一小部分?

Javascript 如何显示我的猫头鹰转盘第二项的一小部分?,javascript,jquery,css,owl-carousel,Javascript,Jquery,Css,Owl Carousel,我致力于开发移动第一网站。 因此,在移动设备上,我只显示猫头鹰旋转木马的一个项目,但我只想显示第二个项目的一小部分,向用户灌输这是一个滑块,但我不能。 我准备好了: 这就是代码: //JS $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop:false, margin:1, nav:false, dots:true, responsive:{ 0:{

我致力于开发移动第一网站。
因此,在移动设备上,我只显示猫头鹰旋转木马的一个项目,但我只想显示第二个项目的一小部分,向用户灌输这是一个滑块,但我不能。
我准备好了:

这就是代码:

//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;
}
第一个版本是可操作的,它可以工作,我可以滑动,但我想显示第二个项目的一小部分,就像这个版本:

要获得它,我只需更改:

$(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,但我不知道如何修改。

谢谢您的帮助

我想您需要的是:

您可以将代码更改为:

$('.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
    }
  }
});

我不知道,但我不认为这就是我要寻找的。stagePadding只需将第一个项目向右移动,如果我使用1个项目,并且设置了2个项目,则整个滑块也会向右移动,并且没有解决我的滑动问题:当我滑动时,滑块不会在第二个项目上停止并返回第一个项目。您检查了我发布的链接吗?我在手机和桌面上试过。它工作正常,在显示或滑动方面没有问题。很抱歉延迟,我检查了它,但无法使其正常工作。它将第一个项目移到左侧,我无法滑动并到达第二个项目。(我为移动显示器工作,因此我将响应:0更改为1项),但我无法显示第二项的一部分:/