Question

您好我最近在以下链接（https://codepen.io/IDCoder/pen/NaNGpq?editors=0100）创建了一个图片幻灯片，其中所有图片都在幻灯片中完美展示。

以下是此幻灯片演示的HTML代码：

<DOCTYPE html>
<html>
<head>
<title>CSS Slideshow Test</title>
</head>

<body> 
  <div class="container">
    <div class="Faces Wheels">
      <figure>
        <img      src="https://s26.postimg.org/cso75hjqh/Faces_Wheels_Dodge_Charger_Front_3-_Quarter_View.jpg
" width="360" height="270">
      <img src="https://s26.postimg.org/63hnpgyeh/Faces_Wheels_Dodge_Charger_Side_3-_Quarter_View.jpg" width="360" height="270">
      <img src="https://s26.postimg.org/9pnh244rt/Faces_Wheels_Dodge_Charger_Side_3-_Quarter_View.jpg" width="360" height="270">
      <img src="https://s26.postimg.org/jlok1rajt/Faces_Wheels_Dodge_Charger_Side_View.jpg" width="360" height="270">
        </figure>
      </div>
  </div>

</body>
</html>

这是CSS代码：

*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none; 
}

.container {
  max-width: 500px;
  overflow: hidden;
  position: relative;
  top: 50px;
  height: 300px;
  left:30%;
}

div.Faces.Wheels {
  width: 3000px;
  position: absolute;
  overflow: hidden;
}

figure {
  width:500px;
  float:none;
  overflow:hidden;
}


.Faces.Wheels figure{
overflow: hidden;
height: 500px;
}


.Faces.Wheels figure img{
width: 100%
float: left;
}

.Faces.Wheels figure{
position: relative;
width: 100%;
margin: 0;
left: 0;
animation: 15s rims infinite;
}


@keyframes rims {
    0%{
        left: -40%;     
    }
  50%{
        left:0%;     
    }
  100%{
        left:-40%;     
    }

}

然而，当我尝试将代码集成到我的其他项目here时，幻灯片中的所有图片都没有滑动...实际上似乎有些图片垂直堆叠并隐藏。你能告诉我是什么原因引起的吗？在此先感谢您的帮助

新项目的HTML，我正在整合幻灯片：

<div class="Fourth Row">
        <div class="container">
      <figure>
        <img src="https://s1.postimg.org/7uayt1hjf3/378c87079dddbfe1d78c9f892695626fl-m0xd-w1020_h770_q80.jpg" width="360" height="270"/>
      <img src="https://s1.postimg.org/11px6krrfz/extralarge.jpg" width="360" height="270"/>
      <img src="https://s1.postimg.org/6yehdl959r/gen_Mid.09186160_1.jpg" width="360" height="270"/>
      <img src="https://s1.postimg.org/8tr267l5fz/ISaly9e2xn0r8r1000000000.jpg" width="360" height="270"/>
      <img src="https://s1.postimg.org/11px6krz5r/ISinl3p5sts48e1000000000_1.jpg" width="360" height="270"/>
        </figure>  
      </div> 
      <div class ="Slideshow Description">
        <p>
          We are Installation Experts! We
Offer Customized Installation for Both Residential and Commercial Properties
        </p>
      </div>

这是CSS代码：

.Main{
  /*background-color: yellow;*/
  display: grid;
    grid-template-columns:(3, 1fr);
}

.Header.Box {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
  /*background-color: red;*/
  grid-gap: 0;
}

#One, #Two, #Three {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;  
}

.Second.Row{
  display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.Third.Row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /*background-color: green;*/
}

.Fourth.Row{
  display: grid;
  gris-template: repeat(2, 1fr);
  background-color: blue;
}


/**{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none; 
}*/

.container {
  max-width: 500px;
  overflow: hidden;
  position: left;
  top: 50px;
  height: 300px;
  left:30%;
}

  /*.Fourth.Row {
  width: 3000px;
  position: absolute;
  overflow: hidden;
}*/

figure {
  width:500px;
  float:none;
  overflow:hidden;
}


.Fourth.Row{
overflow: hidden;
height: 500px;
}

.Fourth.Row figure img{
width: 100%
float: left;
}

.Fourth.Row figure{
position: relative;
width: 100%;
margin: 0 0 5 0;
left: 0;
animation: 15s rims infinite;
}


@keyframes rims {
    0%{
        left: -40%;     
    }
  50%{
        left:0%;     
    }
  100%{
        left:-40%;     
    }

}

.Slideshow.Description{
  font-size: 3em;
}

我已经意识到我原始幻灯片中的这部分代码可以让所有图片滑过

.container {
  max-width: 500px;
  overflow: hidden;
  position: left;
  top: 50px;
  height: 300px;
  left:30%;
}

我无法弄清楚然而，如何在我的新项目中配置上述代码，以使图片能够在幻灯片中滑动。

Picture-Slideshow不显示所有图片

0 个答案: