Difference between revisions of "Team:Heidelberg/Team"
Lukas Adam (Talk | contribs) |
Lukas Adam (Talk | contribs) |
||
| Line 1: | Line 1: | ||
{{Heidelberg/header}} | {{Heidelberg/header}} | ||
{{Heidelberg/navbar}} | {{Heidelberg/navbar}} | ||
| − | + | <html> | |
| − | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| − | + | ||
| − | + | ||
| − | + | ||
<style> | <style> | ||
.img-circular{ | .img-circular{ | ||
| Line 210: | Line 207: | ||
} | } | ||
</style> | </style> | ||
| − | + | <div style="background-color: white !important;"> | |
| + | <div class="page-heading" style="background-image: url( | ||
| + | https://static.igem.org/mediawiki/2017/3/38/T--Heidelberg--2017_Background_Owl.jpg); height: 200px"></div> | ||
| + | <div class="page-title" style="background-color: white !important; border-top: 5px solid #222;padding-bottom: 0px;"> | ||
| + | <div class="container"> | ||
| + | <div class="col-lg-12 col-md-12 col-xs-12" style="padding-bottom: 0px !important;"> | ||
| + | <div style="border-right: 5px solid #393939;padding: 20px 20px 0px 20px"> | ||
| + | <div class="header-title heidelberg-red"> | ||
| + | |||
| + | Meet the | ||
| + | </div> | ||
| + | <div class="header-subtitle" style="color: #393939 !important;"> | ||
| + | |||
| + | Team | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="container" style="background-color: white !important"> | ||
| + | <div class="col-lg-12 col-md-12 col-xs-12"> | ||
| + | <div class="slider"> | ||
<div class="arrows"> | <div class="arrows"> | ||
<a class="previous"></a> | <a class="previous"></a> | ||
| Line 231: | Line 249: | ||
</div> | </div> | ||
<div class="slide" id="b1"> | <div class="slide" id="b1"> | ||
| − | <h1> | + | <h1>Jan</h1> |
<div class="img-circular" id="wall3"></div> | <div class="img-circular" id="wall3"></div> | ||
<div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
| Line 269: | Line 287: | ||
</div> | </div> | ||
| − | }} | + | |
| − | }} | + | </div> |
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <script> | ||
| + | var $slider = $(".slider"), $bullets = $(".bullets"); | ||
| + | function calculateHeight(){ | ||
| + | var height = $(".slide.active").outerHeight(); | ||
| + | $slider.height(height); | ||
| + | } | ||
| + | |||
| + | $(window).resize(function() { | ||
| + | calculateHeight(); | ||
| + | clearTimeout($.data(this, 'resizeTimer')); | ||
| + | }); | ||
| + | |||
| + | function resetSlides(){ | ||
| + | $(".slide.inactive").removeClass("inactiveRight").removeClass("inactiveLeft"); | ||
| + | } | ||
| + | |||
| + | function gotoSlide($activeSlide, $slide, className){ | ||
| + | $activeSlide.removeClass("active").addClass("inactive "+className); | ||
| + | $slide.removeClass("inactive").addClass("active"); | ||
| + | calculateHeight(); | ||
| + | resetBullets(); | ||
| + | setTimeout(resetSlides, 300); | ||
| + | } | ||
| + | |||
| + | $(".next").on("click", function(){ | ||
| + | var $activeSlide = $(".slide.active"), | ||
| + | $nextSlide = $activeSlide.next(".slide").length != 0 ? $activeSlide.next(".slide") : $(".slide:first-child"); | ||
| + | console.log($nextSlide); | ||
| + | gotoSlide($activeSlide, $nextSlide, "inactiveLeft"); | ||
| + | }); | ||
| + | $(".previous").on("click", function(){ | ||
| + | var $activeSlide = $(".slide.active"), | ||
| + | $prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child"); | ||
| + | gotoSlide($activeSlide, $prevSlide, "inactiveRight"); | ||
| + | }); | ||
| + | $(document).on("click", ".bullet", function(){ | ||
| + | if($(this).hasClass("active")){ | ||
| + | return; | ||
| + | } | ||
| + | var $activeSlide = $(".slide.active"); | ||
| + | var currentIndex = $activeSlide.index(); | ||
| + | var targetIndex = $(this).index(); | ||
| + | console.log(currentIndex, targetIndex); | ||
| + | var $theSlide = $(".slide:nth-child("+(targetIndex+1)+")"); | ||
| + | gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft"); | ||
| + | }) | ||
| + | function addBullets(){ | ||
| + | var total = $(".slide").length, index = $(".slide.active").index(); | ||
| + | for (var i=0; i < total; i++){ | ||
| + | var $bullet = $("<div>").addClass("bullet"); | ||
| + | if(i==index){ | ||
| + | $bullet.addClass("active"); | ||
| + | } | ||
| + | $bullets.append($bullet); | ||
| + | } | ||
| + | } | ||
| + | function resetBullets(){ | ||
| + | $(".bullet.active").removeClass("active"); | ||
| + | var index = $(".slide.active").index()+1; | ||
| + | console.log(index); | ||
| + | $(".bullet:nth-child("+index+")").addClass("active"); | ||
| + | } | ||
| + | addBullets(); | ||
| + | calculateHeight(); | ||
| + | </script> | ||
| + | </html> | ||
{{Heidelberg/footer}} | {{Heidelberg/footer}} | ||
Revision as of 10:46, 29 October 2017
Meet the
Team
