Slider of images with css

Question

Slider of images with css

Navigation

#1 by (2 votes)

1

.slider {
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.slider ul {
  width: 400%;
  /* mas imagenes mayor el % 100+*/
  height: 500px;
  display: flex;
  list-style: none;
  overflow: hidden;
  order: 1;
  transition: all 0.9s;
  animation: slider 20s infinite;
}

.slider ul li img {
  background-size: 100% 100%;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label {
  display: block;
  width: 10%;
  height: 120px;
  cursor: pointer;
  order: 2;
}

input[type="radio"]+label:hover {
  transition: .3s;
  opacity: .7;
}

#sbutton1+label {
  background: url(http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg);
  background-size: 100% 100%;
}

#sbutton2+label {
  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);
  background-size: 100% 100%;
}

#sbutton3+label {
  background: url(http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg);
  background-size: 100% 100%;
}

#sbutton4+label {
  background: url(http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg);
  background-size: 100% 100%;
}

#sbutton1:checked~ul {
  margin-left: 0;
  animation: none;
}

#sbutton2:checked~ul {
  margin-left: -100%;
  animation: none;
}

#sbutton3:checked~ul {
  margin-left: -200%;
  animation: none;
}

#sbutton4:checked~ul {
  margin-left: -300%;
  animation: none;
}

@keyframes slider {
  0%,
  20% {
    margin-left: 0;
  }
  25%,
  40% {
    margin-left: -100%;
  }
  45%,
  70% {
    margin-left: -200%;
  }
  72%,
  100% {
    margin-left: -300%;
  }
}

<div class="slider">
  <input type="radio" id="sbutton1" name="sradio">
  <label for="sbutton1"></label>
  <input type="radio" id="sbutton2" name="sradio">
  <label for="sbutton2"></label>
  <input type="radio" id="sbutton3" name="sradio">
  <label for="sbutton3"></label>
  <input type="radio" id="sbutton4" name="sradio">
  <label for="sbutton4"></label>

  <ul>
    <li><img src="http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg"></li>
    <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>
    <li><img src="http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg"></li>
    <li><img src="http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg"></li>
  </ul>
</div>

As I can adapt the width of each image to 100% and the height to 100% in the same way is to say that only the part of the thumbnails is in the bottom and the images occupy the entire screen.

html css

asked by DoubleM 11.03.2017 в 21:52

source

1 answer

create table from java that has a database in access consultations on django models

score 2 · Accepted Answer

First you have to reset margins and fills that browsers add by default in some tags. For example, ul by default has a left padding. A quick way to reset these values is:

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

Second, it is not necessary to give a width of 400 pixels to the list; just give him 100% . In addition, the overflow must have the parent ( .slider ) since you are moving the list, and not the elements li .

Third, the background-size property applies to elements that have a background image , that is, by background-image . To make an element img have the dimensions of the parent, just give it a height and width of 100% .

The most complicated thing to do here are the thumbnails, since they must have a higher contrast than the slider. Therefore, in the example that I put you I have created a layer that obscures the slider when hovering over it, and then the thumbnails are shown.

Example (view in full screen)

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

.slider {
  background-color: rgba(0, 0, 0, .5);
  margin: auto;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-flow: column-reverse nowrap;
  overflow: hidden;
}

.slider ul {
  width: 100%;
  flex: 1;
  display: flex;
  list-style: none;
  //overflow: hidden;
  order: 1;
  transition: all 0.9s;
  animation: slider 20s infinite;
}

.slider ul li {
  flex: 0 0 100%;
  height: 100%;
}

.slider ul li img {
  height: 100%;
  width: 100%;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label {
  bottom: 50px;
  display: block;
  cursor: pointer;
  height: 60px;
  left: calc(50% - 90px);
  opacity: 0;
  position: absolute;
  order: 2;
  transition: all .3s ease;
  visibility: hidden;
  width: 60px;
  z-index: 3;
}

input[type="radio"]+label:hover {
  transition: .3s;
  opacity: .7;
}

#sbutton1+label {
  background: url(http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg);
  background-size: cover;
}

#sbutton2+label {
  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);
  background-size: cover;
  left: calc(50% - 30px);
}

#sbutton3+label {
  background: url(http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg);
  background-size: cover;
  left: calc(50% - -30px);
}

#sbutton4+label {
  background: url(http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg);
  background-size: cover;
  left: calc(50% - -90px);
}

#sbutton1:checked~ul {
  margin-left: 0;
  animation: none;
}

#sbutton2:checked~ul {
  margin-left: -100%;
  animation: none;
}

#sbutton3:checked~ul {
  margin-left: -200%;
  animation: none;
}

#sbutton4:checked~ul {
  margin-left: -300%;
  animation: none;
}

@keyframes slider {
  0%,
  20% {
    margin-left: 0;
  }
  25%,
  40% {
    margin-left: -100%;
  }
  45%,
  70% {
    margin-left: -200%;
  }
  72%,
  100% {
    margin-left: -300%;
  }
}

.overlay {
  background-color: rgba(0, 0, 0, .5);
  left: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all .3s ease;
  visibility: hidden;
  width: 100%;
  z-index: 2;
}

.slider:hover .overlay {
  opacity: 1;
  visibility: visible;
}

.slider:hover > input[type="radio"] + label {
  opacity: 1 ;
  visibility: visible;
}

<div class="slider">
  <div class="overlay"></div>
  <input type="radio" id="sbutton1" name="sradio">
  <label for="sbutton1"></label>
  <input type="radio" id="sbutton2" name="sradio">
  <label for="sbutton2"></label>
  <input type="radio" id="sbutton3" name="sradio">
  <label for="sbutton3"></label>
  <input type="radio" id="sbutton4" name="sradio">
  <label for="sbutton4"></label>

  <ul>
    <li><img src="http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg"></li>
    <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>
    <li><img src="http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg"></li>
    <li><img src="http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg"></li>
  </ul>
</div>