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

(Replaced content with "<html> <head> <title>Slideshow</title> </head> </html>")
 
(29 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
</head>
 
</head>
  
 +
<div class="slideshow-container">
 +
  <div class="mySlides fade">
 +
    <!-- <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%; height: 80vh; object-fit: cover;">
 +
    <div class="SlideShowText">The Whole Student Team!</div>
 +
  </div>
  
 +
  <div class="mySlides fade">
 +
  <!-- <div class="numbertext">2 / 5</div> -->
 +
    <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="SlideShowText">Practicing presenting and rocking shades</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="numbertext">5 / 5</div> -->
 +
    <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="SlideShowText">Enjoying ice cream with RH lab mentor Mike!</div>
 +
  </div>
 +
 
 +
 +
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
 +
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
 +
</div>
 +
<br>
 +
 +
<div style="text-align:center">
 +
  <span class="dot" onclick="currentSlide(1)"></span>
 +
  <span class="dot" onclick="currentSlide(2)"></span>
 +
  <span class="dot" onclick="currentSlide(3)"></span>
 +
  <span class="dot" onclick="currentSlide(4)"></span>
 +
  <span class="dot" onclick="currentSlide(5)"></span>
 +
 +
</div>
 +
 +
</div>
 +
 +
<style>
 +
* {box-sizing:border-box}
 +
 +
/* Slideshow container - Change dimensions of the Border Box */
 +
.slideshow-container {
 +
  width: 100%;
 +
  height: 80vh;
 +
  position: relative;
 +
  margin: 0px;
 +
  padding: 0px;
 +
  top: 0px;
 +
  z-index: 5;
 +
}
 +
 +
.mySlides {
 +
    display: none;
 +
}
 +
 +
/* Next & previous buttons - Somehow doesn't work on the wiki!? */
 +
.prev, .next {
 +
  cursor: pointer;
 +
  position: absolute;
 +
  top: 50%;
 +
  width: auto;
 +
  margin-top: -22px;
 +
  padding: 16px;
 +
  color: white;
 +
  font-weight: bold;
 +
  font-size: 18px;
 +
  transition: 0.6s ease;
 +
  border-radius: 0 3px 3px 0;
 +
  visibility:enabled
 +
}
 +
 +
/* Position the "next button" to the right */
 +
.next {
 +
  right: 0;
 +
  border-radius: 3px 0 0 3px;
 +
}
 +
 +
/* When clicked, add hover and add a black background color with a little bit see-through, cool effect from slide to slide?*/
 +
.prev:hover, .next:hover {
 +
  background-color: rgba(0,0,0,0.8);
 +
}
 +
 +
/* Caption text */
 +
.SlideShowText {
 +
  color: #C2DFFF;
 +
  font-size: 20px;
 +
  font-family: Verdana;
 +
  font-weight:bold;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  bottom: 50px;
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
 +
/* Number text that shows what image out of total the current page is on) */
 +
.numbertext {
 +
  color: #f2f2f2;
 +
  font-size: 12px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  top: 0;
 +
}
 +
 +
 +
/* The dots/bullets/indicators */
 +
.dot {
 +
  cursor:pointer;
 +
  height: 13px;
 +
  width: 13px;
 +
  margin: 0 2px;
 +
  background-color: #bbb;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 +
  position: relative;
 +
  bottom: 50px;
 +
  z-index: 10;
 +
}
 +
 +
.active, .dot:hover {
 +
  background-color: #717171;
 +
}
 +
 +
/* Fading animation */
 +
.fade {
 +
  -webkit-animation-name: fade;
 +
  -webkit-animation-duration: 7s;
 +
  animation-name: fade;
 +
  animation-duration: 1.5s;
 +
}
 +
 +
@-webkit-keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
 +
@keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
</style>
 +
 +
<script>
 +
var slideIndex = 1;
 +
showSlides(slideIndex);
 +
 +
function plusSlides(n) {
 +
  showSlides(slideIndex += n);
 +
}
 +
 +
function currentSlide(n) {
 +
  showSlides(slideIndex = n);
 +
}
 +
 +
function showSlides(n) {
 +
  var i;
 +
  var slides = document.getElementsByClassName("mySlides");
 +
  var dots = document.getElementsByClassName("dot");
 +
  if (n > slides.length) {slideIndex = 1}   
 +
  if (n < 1) {slideIndex = slides.length}
 +
  for (i = 0; i < slides.length; i++) {
 +
      slides[i].style.display = "none"; 
 +
  }
 +
  for (i = 0; i < dots.length; i++) {
 +
      dots[i].className = dots[i].className.replace(" active", "");
 +
  }
 +
  slides[slideIndex-1].style.display = "block"; 
 +
  dots[slideIndex-1].className += " active";
 +
}
 +
 +
</script>
  
  
  
 
</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!