Difference between revisions of "Team:UANL"

Line 2: Line 2:
  
 
<style>
 
<style>
−
//how many images we have
+
:root {
−
$slides: 4;
+
font-size: 14px;
 +
}
 +
@media screen and (max-width: 767px){
 +
:root {
 +
font-size: 12px;
 +
}
 +
}
 +
html,body{
 +
padding: 0;
 +
margin: 0;
 +
font-family: Lato;
 +
}
 +
.slider {
 +
width: 500px;
 +
height: 250px;
 +
overflow: hidden;
 +
position: relative;
 +
text-align: center;
 +
line-height: 240px;
 +
}
 +
.slider > .radio {
 +
display: none;
 +
}
  
−
// how much we want each slide to show
+
/* slide items */
−
$time_per_slide: 4;
+
.slider > .item {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 1;
 +
}
 +
.slider > .radio:checked ~ .item {
 +
transition: all .4s ease 0s;
 +
}
 +
/* labels ( prev. and next button ) */
 +
.slider > .label {
 +
display: none;
 +
position: absolute;
 +
z-index: 4;
 +
top: 0;
 +
height: 100%;
 +
width: 30px;
 +
background-color: rgba( 255, 255, 255, .5 );
 +
opacity: 0;
 +
transition: opacity .2s ease 0s;
 +
}
 +
.slider:hover > .label {
 +
opacity: 1;
 +
transition: opacity .2s ease 0s;
 +
}
 +
/* indicators */
 +
.slider > .indicator {
 +
position: relative;
 +
display: inline-block;
 +
bottom: 5px;
 +
z-index: 5;
 +
width: 10px;
 +
height: 10px;
 +
border-radius: 5px;
 +
background-color: rgba( 255, 255, 255, .5 );
 +
vertical-align: bottom;
 +
line-height: 1;
 +
opacity: 0;
 +
transition: opacity .2s ease 0s;
 +
}
 +
.slider:hover > .indicator {
 +
opacity: 1;
 +
transition: opacity .2s ease 0s;
 +
}
 +
.slider > .indicator label {
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
}
  
−
// total time needed for full animation
 
−
$total_animation_time: $time_per_slide * $slides;
 
  
−
body{
+
/* [ active slide item ] asterisks: slide.length - 1 */
−
  background:#000;
+
.slider > .radio:checked + * + * + * + * + .item {
 +
left: 0;
 +
z-index: 3;
 
}
 
}
−
.container{
+
/* [ previous slide item ] asterisks: slide.length - 2 */
−
  margin:50px auto;
+
.slider > .radio:checked + * + * + * + .item,
−
  width:500px;
+
.slider > .radio:first-of-type:checked ~ .item:last-of-type {
−
  height:300px;
+
left: -100%;
−
  overflow:hidden;
+
z-index: 2;
−
  border:10px solid;
+
−
  border-top-color:#856036;
+
−
  border-left-color:#5d4426;
+
−
  border-bottom-color:#856036;
+
−
  border-right-color:#5d4426;
+
−
  position:relative;
+
−
 
+
 
}
 
}
−
.photo{
+
/* [ next slide item ] asterisks: slide.length */
−
  position:absolute;
+
.slider > .radio:checked + * + * + * + * + * + .item,
−
  animation:round #{$total_animation_time}s infinite;
+
.slider > .radio:last-of-type:checked ~ .item:first-of-type {
−
  opacity:0;
+
left: 100%;
−
 
+
z-index: 2;
 
}
 
}
−
@keyframes round{ 
+
/* [ previous button ] asterisks: ( slide.length - 1 ) * 2 */
−
  25%{
+
.slider > .radio:checked + * + * + * + * + * + * + * + * + .label,
−
    opacity:1;
+
.slider > .radio:first-of-type:checked ~ .label:last-of-type {
−
  }
+
left: 0;
−
  40%{
+
display: block;
−
    opacity:0;
+
}
−
  }
+
/* [ next button ] asterisks: slide.length * 2 */
−
}  
+
.slider > .radio:checked + * + * + * + * + * + * + * + * + * + * + .label,
−
 
+
.slider > .radio:last-of-type:checked ~ .label:first-of-type {
−
@for $index from 1 to $slides + 1{
+
right: 0;
−
  img:nth-child(#{$index}){
+
display: block;
−
    animation-delay:#{$total_animation_time - $time_per_slide * $index}s
+
}
−
  }
+
/* [ active indicator ] asterisks: ( slide.length * 3 ) - 1 */
 +
.slider > .radio:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + .indicator {
 +
background-color: rgba( 127, 127, 127, .5 );
 
}
 
}
−
 
 
−
 
 
</style>
 
</style>
  
−
<div class="container">
+
<div class="slider">
−
  <img class='photo'  src="https://static.igem.org/mediawiki/2019/2/2d/T--UANL--mty.jpg" alt="" />
+
<input type="radio" name="radio" id="radio01" class="radio" checked="checked">
−
  <img class='photo'  src="https://static.igem.org/mediawiki/2019/c/c0/T--UANL--mty3.jpg" alt="" />
+
<input type="radio" name="radio" id="radio02" class="radio">
−
  <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
+
<input type="radio" name="radio" id="radio03" class="radio">
−
  <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
+
<input type="radio" name="radio" id="radio04" class="radio">
−
 
+
<input type="radio" name="radio" id="radio05" class="radio">
 +
<div class="item" id="item01"><img src="https://unsplash.it/500/250?image=1021" alt="slide-image-01"></div>
 +
<div class="item" id="item02"><img src="https://unsplash.it/500/250?image=1032" alt="slide-image-02"></div>
 +
<div class="item" id="item03"><img src="https://unsplash.it/500/250?image=1023" alt="slide-image-03"></div>
 +
<div class="item" id="item04"><img src="https://unsplash.it/500/250?image=1024" alt="slide-image-04"></div>
 +
<div class="item" id="item05"><img src="https://unsplash.it/500/250?image=1035" alt="slide-image-05"></div>
 +
<label class="label" id="label01" for="radio01"></label>
 +
<label class="label" id="label02" for="radio02"></label>
 +
<label class="label" id="label03" for="radio03"></label>
 +
<label class="label" id="label04" for="radio04"></label>
 +
<label class="label" id="label05" for="radio05"></label>
 +
<span class="indicator"><label id="indicator01" for="radio01"></label></span>
 +
<span class="indicator"><label id="indicator02" for="radio02"></label></span>
 +
<span class="indicator"><label id="indicator03" for="radio03"></label></span>
 +
<span class="indicator"><label id="indicator04" for="radio04"></label></span>
 +
<span class="indicator"><label id="indicator05" for="radio05"></label></span>
 
</div>
 
</div>
  
 
</html>
 
</html>

Revision as of 01:58, 22 October 2019

slide-image-01
slide-image-02
slide-image-03
slide-image-04
slide-image-05