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项),但我无法显示第二项的一部分:/