第一个项目上的轮播填充

Question

我正在使用舞台填充处理猫头鹰旋转木马： http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

我正在使用带有loop:false的轮播。我试图让第一个项目在左边没有填充，并且在滑动之后它在左右两个项目中保持相同的填充。

所以在页面加载时它应该是这样的：

在幻灯片上：

使用stage-padding可以左右填充。在我的测试中显示第一项的空间：http://pixelbypixel.comli.com/owl/

问题是，如果我删除padding-left（为了获得左边没有边距的第一个项目），我会在幻灯片上得到这个结果：

我知道如何解决这个问题？

这是我的标记：

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
</div>

$('.owl-carousel').owlCarousel({
    stagePadding: 40,
    loop:false,
    margin:2,
    nav:false,
    items:2
})

Answer 1

它来自内联样式，尝试找到此行并删除padding-left，如下所示：

<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); 
transition: all 0s ease 0s; width: 11132px; 
padding-left: 0px; padding-right: 40px;">.. </div>

Answer 2

u可以这样添加“ left”： position: relative

Answer 3

你可以正确使用这个简单的开始

.owl-stage {
    right: -32px;
 }

或者从左边开始使用这个简单的代码

.owl-stage {
    left: -32px;
 }

您在代码中内联的 CSS 中使用标签样式

Answer 4

添加此CSS可以正常工作。.

.owl-stage {padding-left：0px！important;}