Javascript bxslider-幻灯片重叠-在一帧中显示两张幻灯片

BX滑块的这个问题快让我发疯了。说到这个，我几乎是个新手。 我指的是这个页面>（这个问题也出现在其他页面）

前4张幻灯片是JPEG；所有1200px x 803px，这是BX包装的大小。 第五张幻灯片是一个MP4视频，它没有填充上述维度。 这样做的目的是在视频下方显示第1张幻灯片的顶部（在本例中为带有简介文本的jpeg）

以下幻灯片也有类似的视频，但“幻灯片重叠”仅出现在第一个视频上

我尝试的每件事要么不起作用，要么修复了这张幻灯片，但将问题推到下一个视频

提前谢谢。如果你需要更多信息，请告诉我

---

非常感谢您的任何想法。

我在滑块设置中发现了一段异常的代码。如果您查看滑块的源代码，您应该会在第89行看到以下代码：

<span style="min-width:800px; display:block; margin:0 auto"><video  width="640" height="360" controls>

我想，“最小宽度”是造成您问题的原因。删除它[编辑：整个跨度标记]和第92行附近的结束标记。像其他视频一样，从视频标记中取出

width=“640”height=“360”

我在chrome开发工具中完成了这项工作，并得到了以下结果：

---

希望这有帮助！

确切地说，您没有在这里显示您的问题，但是 我认为如果你遵循下面的结构，它将对你有所帮助

html

<div class="slider">
    <ul>
        <li>your video</li>
        <li><img>.....</img></li>
        <li><img>.....</img></li>
        <li><img>.....</img></li>
        <li>your video</li>
        <li><img>.....</img></li>
        <li><img>.....</img></li>
        <li>your video</li>
    </ul>    
</div>

*如果您使用的是全宽滑块，如果不是全宽，则包装固定宽度容器，那么它将非常有效

<div class="bxslider">
    <ul>
        <li><img src="img1.jpg"></img></li>
        <li><img src="img2.jpg"></img></li>
   </ul>    
</div>

所有元素都将被隐藏，只有当前元素将被显示，bxslider使用内联css显示当前幻灯片。它应该可以工作

<div class="bxslider">
    <ul>
        <li><img src="img1.jpg"></img></li>
        <li><img src="img2.jpg"></img></li>
   </ul>    
</div>

 .bxslider li{display:none;}