Difference between revisions of "Template:US AFRL CarrollHS SlideShow"

 
(118 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<title>Slideshow</title>
+
    <title>Slideshow</title>
 
</head>
 
</head>
−
<body>
+
 
 
<div class="slideshow-container">
 
<div class="slideshow-container">
 
   <div class="mySlides fade">
 
   <div class="mySlides fade">
−
     <div class="numbertext">1 / 3</div>
+
     <!-- <div class="numbertext">1 / 5</div> -->
−
     <img src="https://static.igem.org/mediawiki/igem.org/f/f1/Team_Photo_in_Front_of_a_Airplane.jpg" style="width:100%">
+
     <img src="https://static.igem.org/mediawiki/igem.org/f/f1/Team_Photo_in_Front_of_a_Airplane.jpg" style="width: 100%; height: 80vh; object-fit: cover;">
−
     <div class="text">The Whole Student Team!</div>
+
     <div class="SlideShowText">The Whole Student Team!</div>
 
   </div>
 
   </div>
  
 
   <div class="mySlides fade">
 
   <div class="mySlides fade">
−
    <div class="numbertext">2 / 3</div>
+
  <!-- <div class="numbertext">2 / 5</div> -->
−
     <img src="https://static.igem.org/mediawiki/igem.org/0/03/Chia_Looking_Awesome.jpg" style="width:100%">
+
     <img src="https://static.igem.org/mediawiki/2017/thumb/6/63/Shades.jpg/800px-Shades.jpg" style="width: 100%; height: 80vh; object-fit: cover;">
−
     <div class="text">Chia Looking off into the Distance</div>
+
     <div class="SlideShowText">Practicing presenting and rocking shades</div>
 
   </div>
 
   </div>
−
 
+
 
 +
  <div class="mySlides fade">
 +
    <!-- <div class="numbertext">3 / 5</div> -->
 +
    <img src="https://static.igem.org/mediawiki/2017/thumb/f/f3/Shirts.jpg/800px-Shirts.jpg" style="width: 100%; height: 80vh; object-fit: cover;">
 +
    <div class="SlideShowText">Dr. O'Malley, Annie, Jonah, Dr. Dickey, and Dr. Carter modelling new shirts!</div>
 +
  </div>
 +
 
 +
  <div class="mySlides fade">
 +
    <!-- <div class="numbertext">4 / 5</div> -->
 +
    <img src="https://static.igem.org/mediawiki/2017/thumb/1/1b/Productive.jpg/800px-Productive.jpg" style="width: 100%; height: 80vh; object-fit: cover;">
 +
    <div class="SlideShowText">Productive meeting to work on wiki and presentation</div>
 +
  </div>
 +
 
 +
 
 
   <div class="mySlides fade">
 
   <div class="mySlides fade">
−
     <div class="numbertext">3 / 3</div>
+
     <!-- <div class="numbertext">5 / 5</div> -->
−
     <img src="https://static.igem.org/mediawiki/igem.org/3/3e/Jonah_Fire_and_Ice.jpg" style="width:100%">
+
     <img src="https://static.igem.org/mediawiki/2017/thumb/8/8d/Icecream.jpg/800px-Icecream.jpg" style="width: 100%; height: 80vh; object-fit: cover;">
−
     <div class="text">Jonah in front of the B-2 Bomber</div>
+
     <div class="SlideShowText">Enjoying ice cream with RH lab mentor Mike!</div>
 
   </div>
 
   </div>
 +
 
  
 
   <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
 
   <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
Line 32: Line 46:
 
   <span class="dot" onclick="currentSlide(2)"></span>  
 
   <span class="dot" onclick="currentSlide(2)"></span>  
 
   <span class="dot" onclick="currentSlide(3)"></span>  
 
   <span class="dot" onclick="currentSlide(3)"></span>  
 +
  <span class="dot" onclick="currentSlide(4)"></span>
 +
  <span class="dot" onclick="currentSlide(5)"></span>
 +
 +
</div>
 +
 
</div>
 
</div>
  
Line 39: Line 58:
 
/* Slideshow container - Change dimensions of the Border Box */
 
/* Slideshow container - Change dimensions of the Border Box */
 
.slideshow-container {
 
.slideshow-container {
−
   max-width: 500px;
+
   width: 100%;
 +
  height: 80vh;
 
   position: relative;
 
   position: relative;
−
   margin: auto;
+
   margin: 0px;
 +
  padding: 0px;
 +
  top: 0px;
 +
  z-index: 5;
 
}
 
}
  
Line 61: Line 84:
 
   transition: 0.6s ease;
 
   transition: 0.6s ease;
 
   border-radius: 0 3px 3px 0;
 
   border-radius: 0 3px 3px 0;
−
   visibility: enable;
+
   visibility:enabled
 
}
 
}
  
Line 76: Line 99:
  
 
/* Caption text */
 
/* Caption text */
−
.text {
+
.SlideShowText {
−
   color: #f2f2f2;
+
   color: #C2DFFF;
−
   font-size: 15px;
+
   font-size: 20px;
 +
  font-family: Verdana;
 +
  font-weight:bold;
 
   padding: 8px 12px;
 
   padding: 8px 12px;
 
   position: absolute;
 
   position: absolute;
−
   bottom: 8px;
+
   bottom: 50px;
 
   width: 100%;
 
   width: 100%;
 
   text-align: center;
 
   text-align: center;
 
}
 
}
  
−
/* Number text (1/3 etc) */
+
/* Number text that shows what image out of total the current page is on) */
 
.numbertext {
 
.numbertext {
 
   color: #f2f2f2;
 
   color: #f2f2f2;
Line 94: Line 119:
 
   top: 0;
 
   top: 0;
 
}
 
}
 +
  
 
/* The dots/bullets/indicators */
 
/* The dots/bullets/indicators */
Line 105: Line 131:
 
   display: inline-block;
 
   display: inline-block;
 
   transition: background-color 0.6s ease;
 
   transition: background-color 0.6s ease;
 +
  position: relative;
 +
  bottom: 50px;
 +
  z-index: 10;
 
}
 
}
  
Line 114: Line 143:
 
.fade {
 
.fade {
 
   -webkit-animation-name: fade;
 
   -webkit-animation-name: fade;
−
   -webkit-animation-duration: 1.5s;
+
   -webkit-animation-duration: 7s;
 
   animation-name: fade;
 
   animation-name: fade;
 
   animation-duration: 1.5s;
 
   animation-duration: 1.5s;
Line 129: Line 158:
 
}
 
}
 
</style>
 
</style>
−
 
  
 
<script>
 
<script>
Line 158: Line 186:
 
   dots[slideIndex-1].className += " active";
 
   dots[slideIndex-1].className += " active";
 
}
 
}
 +
 
</script>
 
</script>
  
  
−
</body>
 
  
 
</html>
 
</html>

Latest revision as of 03:06, 2 November 2017

Slideshow

The Whole Student Team!
Practicing presenting and rocking shades
Dr. O'Malley, Annie, Jonah, Dr. Dickey, and Dr. Carter modelling new shirts!
Productive meeting to work on wiki and presentation
Enjoying ice cream with RH lab mentor Mike!