jQuery 滑块加载第一张图片失败

Question

加载第一页时，我的滑块出现问题。当我使用图像下方的 "left" 或 "right" 箭头然后返回第一页时，一切正常。不知道我可以在哪里修复它。

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

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

Answer 1

您通过将 .slide 定义为隐藏后记来覆盖 .slide .active-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 按照编码的顺序加载。您正在用 .slide class 覆盖 .active-slide，这会禁用您正在寻找的 display: block;。为了使一切正常，请移动：

.active-slide 
{
    display: block;
}

低于

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

jQuery 滑块加载第一张图片失败

jQuery slider fails to load first image

html

css

jquery