JQuery Slider - Chrome无法正常显示一张幻灯片

Question

使用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>

Answer 1

<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
     }      
});

Answer 2

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