Question

BX滑块的这个问题让我很生气。在谈到这一点时，我几乎是一个新手。我指的是这个页面＆gt; http://jimmyhunter.co.uk/cw.html（还有其他人也会出现此问题）

前4张幻灯片是jpeg;全部1200px x 803px，这是BX包装器的大小。第5张幻灯片是MP4视频，不支持上述尺寸。这样做是在视频下面显示幻灯片No.1的顶部（在这种情况下是带有介绍文本的jpeg。

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

我尝试的所有内容都无效或修复此幻灯片，但会将问题推送到下一个视频。

提前致谢。如果您需要更多信息，请告诉我任何想法都感激不尽。

Answer 1

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

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

那个＆＃34;最小宽度＆＃34;我认为是导致你的问题。摆脱它[编辑：整个范围标记]和第92行左右的结束</span>标记。从视频标记中取出width="640" height="360"，与其他视频一样。

我在chrome devtools中做了这个并得到了以下结果：

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

希望有所帮助！

Answer 2

你没有在这里显示你的问题但是我想如果您遵循以下结构，它将对您有所帮助

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

<强> 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%;}

*如果您使用全宽滑块，它将完美地工作，如果不是全宽，则包裹固定宽度容器

Answer 3

HTML

 .bxslider li{display:none;}

CSS

person.save(flush:true)

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

bxslider - 幻灯片重叠 - 两个幻灯片显示在1帧中

3 个答案: