如何在 owl-carousel 幻灯片中查找视频元素，然后仅为该特定幻灯片设置 owl-carousel 控件的 cs

How to find a video element within an owl-carousel slide and then set owl-carousel control's css only for that specific slide

本文关键字：owl-carousel 幻灯片 控件 cs 设置 查找 视频 元素 然后      更新时间：2023-09-26

我写这篇文章是为了在猫头鹰轮播幻灯片中查找视频元素，然后为该特定幻灯片设置 owl-carousel 控件的 CSS（此控件显示在网页运行时）。

代码根本不起作用，我是使用 js 的新手。

$(".item").children().find("video").each(function(){
    var d = document.getElementByClass('owl-controls');
    d.style.bottom = y_pos+'10px';
});

对于 HTML

<div id="post-media" class="owl-carousel item-2">
    <div class="item"><img src="images/fullimage1.jpg" alt="The Last of us"></div>
    <div class="item">
        <video controls="" class="embed-responsive-item" style="width:100%; height:100%">
            <source src="video/clip1.mp4" type="video/mp4">
        </video>
    </div>
    <div class="owl-controls clickable">
        <div class="owl-pagination">
            <div class="owl-page active">
                <span class=""></span>
            </div>
            <div class="owl-page">
                <span class=""></span>
            </div>
        </div>
    </div>
</div>

如果你只想改变owl-controls的位置，就不需要jquery了。您只能使用 CSS：

.owl-carousel .owl-controls
{
   margin-top:10px;
}

如果你知道 css3，你可以对 jQuery 使用相同的查询

$(".item video").each(function(){
    var d = document.getElementByClass('owl-controls');
    d.style.bottom = y_pos+'10px';
});
相关文章：