滑块-幻灯片重叠-两个幻灯片显示在一个帧中

bxslider - slide overlap - two slides showing in 1 frame

本文关键字：幻灯片 一个 显示 重叠 -两 滑块      更新时间：2023-09-26

这个BX滑块的问题让我抓狂。在这方面我还是个新手。我指的是这个页面> http://jimmyhunter.co.uk/cw.html(也有其他地方出现这个问题)

前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>

我认为是"最小宽度"导致了你的问题。去掉它[编辑:整个span标记]和结束的</span>标记在第92行左右。像其他视频一样，从视频标签中取出width="640" height="360"。

我在chrome devtools中这样做了，得到了以下结果:

http://picpaste.com/pics/Screen_Shot_2014-05-22_at_12.38.11-j7DM4t7S.1400758772.png

希望有帮助!

你确实没有在这里显示你的问题，但是我想如果你遵循下面的结构，它会对你有帮助。

<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>
css

.slider{float:left:width:100%;}
.slider ul,.slider ul li,.slider ul li img,.slider ul li video,.slider ul li iframe{float:left:width:100%;}

*如果你使用的是全宽度滑块，它将完美地工作，如果不是全宽度，那么包装固定宽度的容器

html

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

 .bxslider li{display:none;}

所有元素将被隐藏，只有当前的一个将被显示，bxslider使用内联css显示当前幻灯片。

相关文章：