Template:Goettingen/css slider

  1. slider {

text-align: center; }


strong { font-weight: bold; }

label { color: teal; cursor: pointer; text-decoration: none; } label:hover { color: #000 !important; }

  • { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

label, #active, img { -moz-user-select:none;-webkit-user-select:none; } .catch { display: block; height: 0; overflow: hidden; }

  1. slider {

/* margin: 0 auto; */ }

.respond { /* margin: 0 auto; */ max-width: 370px; }





/* NEW EXPERIMENT */ /* Slider Setup */

input { display: none; }

  1. slide1:checked ~ #slides .inner { margin-left:0; }
  2. slide2:checked ~ #slides .inner { margin-left:-100%; }
  3. slide3:checked ~ #slides .inner { margin-left:-200%; }
  4. slide4:checked ~ #slides .inner { margin-left:-300%; }
  5. slide5:checked ~ #slides .inner { margin-left:-400%; }


  1. overflow {

width: 100%; overflow: hidden;

}

article img { width: 100%; margin-top: 3px; }

  1. slides .inner {

width: 500%; line-height: 0; }

  1. slides article {

width: 20%; float: left; }

/* Slider Styling */

/* Control Setup */

  1. controls {
 margin: -25% 0 0 15%;
 width: 70%;
 height: 50px;

}

  1. controls label {

display: none; width: 50px; height: 50px; opacity: 0.6; }

  1. active {

margin: 23% 0 0; text-align: center; }

  1. active label {

-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline-block; width: 10px; height: 10px; background: #bbb; }

  1. active label:hover {

background: #ccc; border-color: #777 !important; }

  1. controls label:hover {

opacity: 0.8; }

  1. slide1:checked ~ #controls label:nth-child(2),
  2. slide2:checked ~ #controls label:nth-child(3),
  3. slide3:checked ~ #controls label:nth-child(4),
  4. slide4:checked ~ #controls label:nth-child(5),
  5. slide5:checked ~ #controls label:nth-child(1) {

background: url('https://static.igem.org/mediawiki/2016/5/5f/T--Goettingen--Slider_next.png') no-repeat; float: right; margin: 0 -70px 0 0; display: block; }


  1. slide1:checked ~ #controls label:nth-child(5),
  2. slide2:checked ~ #controls label:nth-child(1),
  3. slide3:checked ~ #controls label:nth-child(2),
  4. slide4:checked ~ #controls label:nth-child(3),
  5. slide5:checked ~ #controls label:nth-child(4) {

background: url('https://static.igem.org/mediawiki/2016/e/e4/T--Goettingen--Slider_prev.png') no-repeat; float: left; margin: 0 0 0 -70px; display: block; }

  1. slide1:checked ~ #active label:nth-child(1),
  2. slide2:checked ~ #active label:nth-child(2),
  3. slide3:checked ~ #active label:nth-child(3),
  4. slide4:checked ~ #active label:nth-child(4),
  5. slide5:checked ~ #active label:nth-child(5) {

background: #333; border-color: #333 !important; }


}

/* Slider Styling */

  1. slides {

margin: 45px 0 0; padding: 1%; }


/* Animation */

  1. slides .inner {

-webkit-transform: translateZ(0); -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 

   -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
       transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 

   -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
       transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

}

  1. slider {

-webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }

  1. controls label{

-webkit-transform: translateZ(0); -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; }

.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }


/* Responsive Styling */


@media only screen and (max-width: 850px) and (min-width: 450px) {

#slider #controls { margin: -25% 0 0 15%; width: 30%; height: 50px; }

#slider #controls label { -moz-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }

#slider #slides { padding: 1% 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }

#slider #active { margin: 22% 0 0; }

}


@media only screen and (max-width: 450px) {

#slider #controls { margin: -28% 0 0 24%; width: 50%; height: 50px; }

#slider #active { margin: 23% 0 0; }

#slider #slides { padding: 1% 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }

#slider #slides .info { opacity: 0 !important; }

#slider #controls label { -moz-transform: scale(0.6); -webkit-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); }

}


@media only screen and (min-width: 850px) {

body { padding: 0 80px; } }