2

使用 jquery-1.9.1

SlidesJS 3.0.3 插件

我在尝试在网站上实现的幻灯片放映时遇到了问题 - 特别是当只有一张幻灯片存在时，问题出在谷歌浏览器上。我已经设置了一些示例供您查看。

在这里，我有一个包含 3 个项目的幻灯片 - 这在所有浏览器中都可以正常工作：

http://blahblahdev.atwebpages.com/rotator2.html

.

在这里，我有完全相同的幻灯片，但只有一项。它在 Firefox 和 Internet Explorer 中运行良好，但在 Google Chrome 中幻灯片是白色的 - 没有图像或文本显示：

http://blahblahdev.atwebpages.com/rotator1.html

在此处输入图像描述

如果只有一个项目，谁能弄清楚为什么这个幻灯片不能正常工作？

谢谢

  <div class="container">
    <div id="slides">

                    <div class="slide">
                        <img src="img/rotator1.png" alt="Slide 1">
                        <div class="caption" style="bottom:0">
                            <h3>Rotator 1</h3>
                            <p>Rotator 1 text goes here.</p>
                        </div>
                    </div>


    </div>
  </div>
4

2 回答 2

2 
<div class="slide slidesjs-slide" slidesjs-index="0" style="position: absolute; top: 0px; /* left: -460px; */ width: 100%; z-index: 10; display: block; -webkit-backface-visibility: hidden;">
                        <img src="img/rotator1.png" alt="Slide 1">
                        <div class="caption" style="bottom:0">
                            <h3>Rotator 1</h3>
                            <p>Rotator 1 text goes here.</p>
                        </div>
                    </div>

left 设置为 -460 px ，删除它，它会正常工作。

编辑：

添加此自定义脚本以解决您的问题

if($(".slide").children().length==1)
{
$(".slide").children()[0].css("left","0px")
}

这有效：

$(document).ready(function() {

     if($(".slide").length < 2 )
     {
          $(".slide").css("left","0px");  // There's only 1 slide so apply fix
     }      
});
于 2014-11-28T11:22:02.867 回答
0

在 div.slide请删除内联样式left:-460px;和样式left:0px;。

于 2014-11-28T11:23:24.977 回答