Slider de imagenes con css

publicado por: Anonymous

introducir la descripción de la imagen aquí

_x000D_

_x000D_

.slider {_x000D_
  margin: auto;_x000D_
  width: 100%;_x000D_
  display: flex;_x000D_
  flex-wrap: wrap;_x000D_
}_x000D_
_x000D_
.slider ul {_x000D_
  width: 400%;_x000D_
  /* mas imagenes mayor el % 100+*/_x000D_
  height: 500px;_x000D_
  display: flex;_x000D_
  list-style: none;_x000D_
  overflow: hidden;_x000D_
  order: 1;_x000D_
  transition: all 0.9s;_x000D_
  animation: slider 20s infinite;_x000D_
}_x000D_
_x000D_
.slider ul li img {_x000D_
  background-size: 100% 100%;_x000D_
}_x000D_
_x000D_
input[type="radio"] {_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
input[type="radio"]+label {_x000D_
  display: block;_x000D_
  width: 10%;_x000D_
  height: 120px;_x000D_
  cursor: pointer;_x000D_
  order: 2;_x000D_
}_x000D_
_x000D_
input[type="radio"]+label:hover {_x000D_
  transition: .3s;_x000D_
  opacity: .7;_x000D_
}_x000D_
_x000D_
#sbutton1+label {_x000D_
  background: url(http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg);_x000D_
  background-size: 100% 100%;_x000D_
}_x000D_
_x000D_
#sbutton2+label {_x000D_
  background: url(https://b.fastcompany.net/multisite_files/coexist/imagecache/1280/poster/2012/11/1680856-poster-1280-10-smartest-european-cities-shutterstock-78340003-1.jpg);_x000D_
  background-size: 100% 100%;_x000D_
}_x000D_
_x000D_
#sbutton3+label {_x000D_
  background: url(http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg);_x000D_
  background-size: 100% 100%;_x000D_
}_x000D_
_x000D_
#sbutton4+label {_x000D_
  background: url(http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg);_x000D_
  background-size: 100% 100%;_x000D_
}_x000D_
_x000D_
#sbutton1:checked~ul {_x000D_
  margin-left: 0;_x000D_
  animation: none;_x000D_
}_x000D_
_x000D_
#sbutton2:checked~ul {_x000D_
  margin-left: -100%;_x000D_
  animation: none;_x000D_
}_x000D_
_x000D_
#sbutton3:checked~ul {_x000D_
  margin-left: -200%;_x000D_
  animation: none;_x000D_
}_x000D_
_x000D_
#sbutton4:checked~ul {_x000D_
  margin-left: -300%;_x000D_
  animation: none;_x000D_
}_x000D_
_x000D_
@keyframes slider {_x000D_
  0%,_x000D_
  20% {_x000D_
    margin-left: 0;_x000D_
  }_x000D_
  25%,_x000D_
  40% {_x000D_
    margin-left: -100%;_x000D_
  }_x000D_
  45%,_x000D_
  70% {_x000D_
    margin-left: -200%;_x000D_
  }_x000D_
  72%,_x000D_
  100% {_x000D_
    margin-left: -300%;_x000D_
  }_x000D_
}

_x000D_

<div class="slider">_x000D_
  <input type="radio" id="sbutton1" name="sradio">_x000D_
  <label for="sbutton1"></label>_x000D_
  <input type="radio" id="sbutton2" name="sradio">_x000D_
  <label for="sbutton2"></label>_x000D_
  <input type="radio" id="sbutton3" name="sradio">_x000D_
  <label for="sbutton3"></label>_x000D_
  <input type="radio" id="sbutton4" name="sradio">_x000D_
  <label for="sbutton4"></label>_x000D_
_x000D_
  <ul>_x000D_
    <li><img src="http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg"></li>_x000D_
    <li><img src="https://b.fastcompany.net/multisite_files/coexist/imagecache/1280/poster/2012/11/1680856-poster-1280-10-smartest-european-cities-shutterstock-78340003-1.jpg"></li>_x000D_
    <li><img src="http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg"></li>_x000D_
    <li><img src="http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg"></li>_x000D_
  </ul>_x000D_
</div>

_x000D_

_x000D_

_x000D_

como puedo adaptar el width de cada imagen al 100% y el height al 100% de igual forma es decir que solo la parte de las miniaturas quede en la parte de abajo y las imagenes ocupen toda la pantalla.

solución

Primero tienes que resetear márgenes y rellenos que los navegadores agregan por defecto en algunas etiquetas. Por ejemplo, ul por defecto tiene un padding izquierdo. Una manera rápida de resetear estos valores es:

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Segundo, no es necesario darle un ancho de 400 pixeles a la lista; basta con darle 100%. Además, el overflow lo debe tener el padre (.slider) ya que estás moviendo la lista, y no los elementos li.

Tercero, la propiedad background-sizeaplica a elementos que tienen una imagen de fondo, es decir, mediante background-image. Para hacer que un elemento img tenga las dimensiones del padre, basta con darle un height y width del 100%.

Lo más complicado de hacer aquí son los thumbnails, ya que deben tener un contraste superior al del slider. Por ello, en el ejemplo que te pongo he creado un capa que oscurezca el slider al hacer hover sobre él, y acto seguido, se muestran los thumbnails.

Ejemplo (ver en pantalla completa)

_x000D_

_x000D_

*,_x000D_
*:before,_x000D_
*:after {_x000D_
  box-sizing: border-box;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
}_x000D_
_x000D_
.slider {_x000D_
  background-color: rgba(0, 0, 0, .5);_x000D_
  margin: auto;_x000D_
  height: 100vh;_x000D_
  width: 100%;_x000D_
  display: flex;_x000D_
  flex-flow: column-reverse nowrap;_x000D_
  overflow: hidden;_x000D_
}_x000D_
_x000D_
.slider ul {_x000D_
  width: 100%;_x000D_
  flex: 1;_x000D_
  display: flex;_x000D_
  list-style: none;_x000D_
  //overflow: hidden;_x000D_
  order: 1;_x000D_
  transition: all 0.9s;_x000D_
  animation: slider 20s infinite;_x000D_
}_x000D_
_x000D_
.slider ul li {_x000D_
  flex: 0 0 100%;_x000D_
  height: 100%;_x000D_
}_x000D_
_x000D_
.slider ul li img {_x000D_
  height: 100%;_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
input[type="radio"] {_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
input[type="radio"]+label {_x000D_
  bottom: 50px;_x000D_
  display: block;_x000D_
  cursor: pointer;_x000D_
  height: 60px;_x000D_
  left: calc(50% - 90px);_x000D_
  opacity: 0;_x000D_
  position: absolute;_x000D_
  order: 2;_x000D_
  transition: all .3s ease;_x000D_
  visibility: hidden;_x000D_
  width: 60px;_x000D_
  z-index: 3;_x000D_
}_x000D_
_x000D_
input[type="radio"]+label:hover {_x000D_
  transition: .3s;_x000D_
  opacity: .7;_x000D_
}_x000D_
_x000D_
#sbutton1+label {_x000D_
  background: url(http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg);_x000D_
  background-size: cover;_x000D_
}_x000D_
_x000D_
#sbutton2+label {_x000D_
  background: url(https://b.fastcompany.net/multisite_files/coexist/imagecache/1280/poster/2012/11/1680856-poster-1280-10-smartest-european-cities-shutterstock-78340003-1.jpg);_x000D_
  background-size: cover;_x000D_
  left: calc(50% - 30px);_x000D_
}_x000D_
_x000D_
#sbutton3+label {_x000D_
  background: url(http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg);_x000D_
  background-size: cover;_x000D_
  left: calc(50% - -30px);_x000D_
}_x000D_
_x000D_
#sbutton4+label {_x000D_
  background: url(http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg);_x000D_
  background-size: cover;_x000D_
  left: calc(50% - -90px);_x000D_
}_x000D_
_x000D_
#sbutton1:checked~ul {_x000D_
  margin-left: 0;_x000D_
  animation: none;_x000D_
}_x000D_
_x000D_
#sbutton2:checked~ul {_x000D_
  margin-left: -100%;_x000D_
  animation: none;_x000D_
}_x000D_
_x000D_
#sbutton3:checked~ul {_x000D_
  margin-left: -200%;_x000D_
  animation: none;_x000D_
}_x000D_
_x000D_
#sbutton4:checked~ul {_x000D_
  margin-left: -300%;_x000D_
  animation: none;_x000D_
}_x000D_
_x000D_
@keyframes slider {_x000D_
  0%,_x000D_
  20% {_x000D_
    margin-left: 0;_x000D_
  }_x000D_
  25%,_x000D_
  40% {_x000D_
    margin-left: -100%;_x000D_
  }_x000D_
  45%,_x000D_
  70% {_x000D_
    margin-left: -200%;_x000D_
  }_x000D_
  72%,_x000D_
  100% {_x000D_
    margin-left: -300%;_x000D_
  }_x000D_
}_x000D_
_x000D_
.overlay {_x000D_
  background-color: rgba(0, 0, 0, .5);_x000D_
  left: 0;_x000D_
  height: 100%;_x000D_
  opacity: 0;_x000D_
  position: absolute;_x000D_
  top: 0;_x000D_
  transition: all .3s ease;_x000D_
  visibility: hidden;_x000D_
  width: 100%;_x000D_
  z-index: 2;_x000D_
}_x000D_
_x000D_
.slider:hover .overlay {_x000D_
  opacity: 1;_x000D_
  visibility: visible;_x000D_
}_x000D_
_x000D_
.slider:hover > input[type="radio"] + label {_x000D_
  opacity: 1 ;_x000D_
  visibility: visible;_x000D_
}

_x000D_

<div class="slider">_x000D_
  <div class="overlay"></div>_x000D_
  <input type="radio" id="sbutton1" name="sradio">_x000D_
  <label for="sbutton1"></label>_x000D_
  <input type="radio" id="sbutton2" name="sradio">_x000D_
  <label for="sbutton2"></label>_x000D_
  <input type="radio" id="sbutton3" name="sradio">_x000D_
  <label for="sbutton3"></label>_x000D_
  <input type="radio" id="sbutton4" name="sradio">_x000D_
  <label for="sbutton4"></label>_x000D_
_x000D_
  <ul>_x000D_
    <li><img src="http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg"></li>_x000D_
    <li><img src="https://b.fastcompany.net/multisite_files/coexist/imagecache/1280/poster/2012/11/1680856-poster-1280-10-smartest-european-cities-shutterstock-78340003-1.jpg"></li>_x000D_
    <li><img src="http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg"></li>_x000D_
    <li><img src="http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg"></li>_x000D_
  </ul>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *