jQuery滑块无法加载第一个图像

Question

在加载第一页时，我的滑块出现问题。当我在图像下使用“左”或“右”箭头然后返回第一页时，一切正常。不知道在哪里可以解决它。

http://fiddle.jshell.net/f7770oLf/1/

实际上我不确定是不是因为CSS或jQuery ..

Answer 1

通过将.slide .active-slide定义为隐藏的后记来覆盖.slide的可见性属性。这使得第一张幻灯片不可见，因为没有jQuery调用使其可见。变化：

.active-slide 
{
  display: block;
}

.slider 
{
  margin-top: 25px;
  width: 100%;
  height: 669px;
}

.slide 
{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

所以.active-slide .slide之后的：

.slider 
{
  margin-top: 25px;
  width: 100%;
  height: 669px;
}

.slide 
{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.active-slide 
{
  display: block;
}

Fiddle

Answer 2

CSS按照编码顺序加载。您正在使用.active-slide类覆盖.slide，这会禁用您正在寻找的display: block;。为了使一切顺利，请移动：

.active-slide 
{
    display: block;
}

下面

.slide 
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}