Javascript 如果其父元素'；s宽度为300%，但每个孩子'；s宽度100%

我有一个左右两个按钮的动态滑块。 这意味着对于每一张幻灯片，幻灯片父级宽度增加100%。2张幻灯片*100%=200%。

示例class=“slider”；宽度：“200%”

我想把每个幻灯片的正文放在页面中间。但我希望文本不仅在幻灯片容器中滑动，而且在其父宽度中滑动（示例中为

class='carousel'

）

下面的代码是滑块现在的外观示例

JavaScript，您应该忽略这一点。实现了它，代码才能正常工作。

document.addEventListener（'DOMContentLoaded'，function（）{//加载HTML后显示函数
const left=document.querySelector（'.left'）；
const right=document.querySelector（'.right'）；
var slider=document.getElementById（'slider'）；
var leftImg=document.getElementById（'left'）；
var rightImg=document.getElementById（'right'）；
var sections=document.querySelectorAll（'.slide'）.length；//获取幻灯片数量
var指数=1；
slider.style.width=''+100*节数+'%；
函数changeOpacity（）{
if（sectionIndex==1）{
leftImg.style.opacity='0.4'；
}否则{
leftImg.style.opacity='1'；
}
if（sectionIndex==节）{
rightImg.style.opacity='0.4'；
}否则{
rightImg.style.opacity='1'；
}
}
left.addEventListener（'click'，function（））{
var leftImg=document.getElementById（'left'）；
sectionIndex=（sectionIndex>1）？sectionIndex-1:1；
slider.style.transform='translate（+（sectionIndex-1）*（-100/节）+'%'；
改变不透明度（）；
});
右。addEventListener（'click'，function（）{
sectionIndex=（sectionIndex

.slider容器{
填充：25px 0px；
宽度：40%；
保证金：自动；
}
.滑动容器.旋转木马{
溢出：隐藏；
高度：260px；
宽度：100%；
边框：纯色2px黑色；
位置：相对位置；
}
.滑块容器.滑块{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
身高：100%；
-webkit转换：.5s；
过渡：.5s；
}
.滑块容器.滑块.滑块{
宽度：100%；
}
.滑块容器.箭头容器{
宽度：70px；
位置：绝对位置；
底部：0；
}

肯勒登
Margot Fonteyn芭蕾舞学院院长
肯勒登
Margot Fonteyn芭蕾舞学院院长
左边
赖特

您的旋转木马是宽度的80%，因此如果您希望旋转木马居中，可以在旋转木马类中执行：margin:0 auto。

谢谢您的回答。我明白你的意思。但是我需要文本和中间的按钮。如果我把保证金：0自动；它将集中在圆盘中间的旋转木马。但是文本和按钮将停留在旋转木马的左侧（开始处）。这并不能很好地解决问题，因此，在arrow容器类add:left:0；右：0；宽度：自动；文本对齐：居中；或者，如果选择同一行上的按钮，请查看：删除-位置：绝对；添加-显示：flex；证明内容：中心；谢谢你的帮助。我找到了解决办法。使用giving class=“slide”flex，对齐项目：中心、方向栏。以及对箭头容器进行调整。