Question

我设法做到了这一点。

但我需要在此图库的末尾有两个链接。

在屏幕中间的最后一张图像之后，我需要有（下一步，信息）链接。

请帮助，谢谢。

我不想要任何javascript。我尝试了所有的东西，但我无法做到的文字是我想要的地方。

＆＃13;

html, body{

  width:100%;
  height:100%;
  font-family: "minion-pro", serif !important;

}
#wrapper {

height: 100%;

}

html, body, ul, li{

  padding:0;
  margin:0;
  border:0;

  text-decoration:none;

}

ul{

  width:100%;
  height:100%; /* CHANGE */

  overflow-y:inherit;
  white-space: nowrap;
  line-height: 0;
  font-size: large;

}

ul li{

  display:inline;

  height:100%;

}

ul li{

  max-height:100%;
  height:100%; /* CHANGE */
  width:auto !important; /* CHANGE */

}

img{
  padding-top: 5%;
  padding-bottom: 5%;
  max-height:1000px;
  height:80%; /* CHANGE */
  width:auto !important; /* CHANGE */

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css.css">
<title></title>
</head>

<body>
	
<div id="wrapper">
	

<ul>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/01.jpg"/>
  </li>
  
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/02.jpg"/>
  </li>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/03.jpg"/>
  </li>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/04.jpg"/>
  </li>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/05.jpg"/>
  </li>
  <li>
    <img style="padding-right: 5%;" src="http://filipkartousek.com/new/Barum/06.jpg"/>
  </li>
  <li>
    <img style="padding-right: 20%;" src="http://filipkartousek.com/new/Barum/07.jpg"/>
  </li>
  
  
  
 </ul> 
 </div> 


</body>

</html>

＆＃13;

Answer 1

在这里使用Css only CSS Only

@keyframes slidy {
  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%;
  }
}
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
img {
  height: 100%;
  width: 100%;
}
div#slider {
  overflow: hidden;
}
div#slider figure img {
  width: 20%;
  float: left;
}
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

<div id="slider">
  <figure>
    <img src="http://filipkartousek.com/new/Barum/01.jpg" alt="">
    <img src="http://filipkartousek.com/new/Barum/02.jpg" alt="">
    <img src="http://filipkartousek.com/new/Barum/03.jpg" alt="">
    <img src="http://filipkartousek.com/new/Barum/04.jpg" alt="">
    <img src="http://filipkartousek.com/new/Barum/05.jpg" alt="">
    <img src="http://filipkartousek.com/new/Barum/06.jpg" alt="">
    <img src="http://filipkartousek.com/new/Barum/07.jpg" alt="">
  </figure>
</div>

你也可以使用 Unslider http://unslider.com/它非常棒。

Answer 2

你可以使用flexbox：

HTML：

<ul>
  <li>
    <img src="http://filipkartousek.com/new/Barum/01.jpg"/>
  </li>

  <li>
    <img src="http://filipkartousek.com/new/Barum/02.jpg"/>
  </li>
  <li>
    <img src="http://filipkartousek.com/new/Barum/03.jpg"/>
  </li>
  <li>
    <img  src="http://filipkartousek.com/new/Barum/04.jpg"/>
  </li>
  <li>
    <img  src="http://filipkartousek.com/new/Barum/05.jpg"/>
  </li>
  <li>
    <img  src="http://filipkartousek.com/new/Barum/06.jpg"/>
  </li>
  <li>
    <img  src="http://filipkartousek.com/new/Barum/07.jpg"/>
  </li>
  <li>
    whatever
  </li>
 </ul>

的CSS：

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

ul li {
    padding: 0 1em 0 0;
}

ul li img {
        height: 90vh;
    width: auto;
}

jsfiddle

Answer 3

这是你的副本，最后有链接。

我将ul / li更改为display: table / display: table-cell。

html, body{
  width:100%;
  height:100%;
  font-family: "minion-pro", serif !important;

}
#wrapper {
  height: 100%;
}

html, body, ul, li{
  padding:0;
  margin:0;
  border:0;
  text-decoration:none;
}

ul {
  display: table;
  width:100%;
  height:100%; /* CHANGE */
  overflow-y:inherit;
  font-size: large;
}

ul li{
  display: table-cell;
  vertical-align: middle;
  max-height: 100%;
  height: 100%; /* CHANGE */
  width:auto !important; /* CHANGE */
  white-space: nowrap;
  padding: 20px;
}

img {
  max-height:1000px;
  height:80vh; /* CHANGE */
  width:auto !important; /* CHANGE */
}

<div id="wrapper">

  <ul>
    
    <li>
      <img src="http://filipkartousek.com/new/Barum/01.jpg"/>
    </li>

    <li>
      <img src="http://filipkartousek.com/new/Barum/02.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/03.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/04.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/05.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/06.jpg"/>
    </li>
    <li>
      <img src="http://filipkartousek.com/new/Barum/07.jpg"/>
    </li>

    <li>
      <a href="">some link 1</a><br>
      <a href="">some link 2</a>

    </li>

  </ul> 
  
</div>

我想要响应式图库，我可以水平滚动。仅限纯HTML5和CSS3

3 个答案: