Question

我正在创建一个包含PHP和HTML的动态网站，用于教育目的。

我一直试图制作幻灯片＆＃39;喜欢这个视频中的那个。 https://www.youtube.com/watch?v=L-vBR3vzOe8

然而，我一直难以设定所需的宽度和高度（这太小了）。我已经玩了最后一小时的代码了，我无法弄明白。

是否有人能够指出我正确的方向？

我的代码看起来像这样：

CSS代码：

@keyframes slider {

0% {
    left: 0;
}

20% {
    left: 0;
}

25% {
    left: -100%;
}

45% {
    left: -100%;

}

50% {
    left: -200%;

}

70% {
    left: -200%;
}

75% {
    left: -300%;
}

95% {
    left: -300%;
}

100% {
    left: -400%;

}

}

#slider {
    overflow: hidden;

}

#slider figure img {
    width:20%;
    float: left;

}

#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slider infinite; 

}

这是我的HTML代码：

  <div id ="slider" >
             <figure>
             <img src ="Images/img1.jpg">
             <img src ="Images/img2.jpg">
             <img src ="Images/img3.jpg">
             <img src ="Images/img4.jpg">

            </figure>
        </div>

提前致谢。

Answer 1

您需要更改#slider（ID为slider的div）的宽度，这是此幻灯片的容器。

最有可能：

滑块div所在的位置，不能大于
您使用的图片不够大
其他一些与样式相关的问题，很难检测到没有对该页面的完全访问权限。

如果您不想使用此方法创建动态页面，那么您将始终需要根据图像数量更改figure的关键帧和宽度。

指向正确的方向 - 更快的方法是使用现成的库bxslider - 这是非常好的文档。

Answer 2

工作样本：JSFiddle

总宽度为100％，高度为自动

您可以更改#slider的宽度

#slider {
  overflow: hidden;
  width: 50%;
}

Html - 更改滑块的宽度和高度

2 个答案: