Difference between revisions of "Team:UANL"

Line 1: Line 1:
−
{{UANL/header}}
 
−
 
 
<html>
 
<html>
  
 
<style>
 
<style>
 +
html, body {
 +
  background: #F7F5E6;
 +
  height: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  width: 100%;
 +
}
  
 
.slider {
 
.slider {
−
width: 95%;
+
  margin: 0 auto;
−
margin: auto;
+
  max-width: 940px;
−
overflow: hidden;
+
 
}
 
}
  
−
.slider ul {
+
.slide_viewer {
−
display: flex;
+
  height: 340px;
−
padding: 0;
+
  overflow: hidden;
−
width: 800%;
+
  position: relative;
−
+
−
animation: cambio 2s infinite alternate linear;
+
 
}
 
}
  
−
.slider li {
+
.slide_group {
−
width: 100%;
+
  height: 100%;
−
list-style: none;
+
  position: relative;
 +
  width: 100%;
 
}
 
}
  
−
.slider img {
+
.slide {
−
width: 100%;
+
  display: none;
 +
  height: 100%;
 +
  position: absolute;
 +
  width: 100%;
 
}
 
}
  
−
@keyframes cambio {
+
.slide:first-child {
−
0% {margin-left: 0;}
+
  display: block;
−
20% {margin-left: 0;}
+
−
+
−
25% {margin-left: -100%;}
+
−
45% {margin-left: -100%;}
+
−
+
−
50% {margin-left: -200%;}
+
−
70% {margin-left: -200%;}
+
−
+
−
75% {margin-left: -300%;}
+
−
100% {margin-left: -300%;}
+
 
}
 
}
  
−
</style>
+
.slide:nth-of-type(1) {
 +
  background: #D7A151;
 +
}
  
−
<div class="slider">
+
.slide:nth-of-type(2) {
−
<ul>
+
   background: #F4E4CD;
−
<li>
+
}
−
  <img src="https://static.igem.org/mediawiki/2019/2/2d/T--UANL--mty.jpg" alt="">
+
−
</li>
+
−
<li>
+
−
  <img src="https://static.igem.org/mediawiki/2019/c/c0/T--UANL--mty3.jpg" alt="">
+
−
</li>
+
−
<li>
+
−
   <img src="https://static.igem.org/mediawiki/2019/a/ac/T--UANL--fcb.png" alt="">
+
−
</li>
+
−
<li>
+
−
  <img src="https://static.igem.org/mediawiki/2019/d/d1/T--UANL--FCQ.jpg" alt="">
+
−
</li>
+
  
−
<li>
+
.slide:nth-of-type(3) {
−
   <img src="https://static.igem.org/mediawiki/2019/e/e7/T--UANL--FIME.jpg" alt="">
+
   background: #C75534;
−
</li>
+
}
  
−
<li>
+
.slide:nth-of-type(4) {
−
   <img src="https://static.igem.org/mediawiki/2019/c/cb/T--UANL--fcfm.jpg" alt="">
+
   background: #D1D1D4;
−
</li>
+
}
  
−
<li>
+
.slide_buttons {
−
   <img src="https://static.igem.org/mediawiki/2019/8/86/T--UANL--CIDEB.jpg" alt="">
+
   left: 0;
−
</li>
+
  position: absolute;
 +
  right: 0;
 +
  text-align: center;
 +
}
  
−
<li>
+
a.slide_btn {
−
   <img src="https://static.igem.org/mediawiki/2019/e/e0/T--UANL--design--diagramaIgem.jpeg" alt="">
+
   color: #474544;
−
</li>
+
  font-size: 42px;
 +
  margin: 0 0.175em;
 +
  -webkit-transition: all 0.4s ease-in-out;
 +
  -moz-transition: all 0.4s ease-in-out;
 +
  -ms-transition: all 0.4s ease-in-out;
 +
  -o-transition: all 0.4s ease-in-out;
 +
  transition: all 0.4s ease-in-out;
 +
}
  
 +
.slide_btn.active, .slide_btn:hover {
 +
  color: #428CC6;
 +
  cursor: pointer;
 +
}
  
−
</ul>
+
.directional_nav {
−
</div>
+
  height: 340px;
 +
  margin: 0 auto;
 +
  max-width: 940px;
 +
  position: relative;
 +
  top: -340px;
 +
}
  
−
</html>
+
.previous_btn {
 +
  bottom: 0;
 +
  left: 100px;
 +
  margin: auto;
 +
  position: absolute;
 +
  top: 0;
 +
}
  
 +
.next_btn {
 +
  bottom: 0;
 +
  margin: auto;
 +
  position: absolute;
 +
  right: 100px;
 +
  top: 0;
 +
}
  
−
{{UANL/footer}}
+
.previous_btn, .next_btn {
 +
  cursor: pointer;
 +
  height: 65px;
 +
  opacity: 0.5;
 +
  -webkit-transition: opacity 0.4s ease-in-out;
 +
  -moz-transition: opacity 0.4s ease-in-out;
 +
  -ms-transition: opacity 0.4s ease-in-out;
 +
  -o-transition: opacity 0.4s ease-in-out;
 +
  transition: opacity 0.4s ease-in-out;
 +
  width: 65px;
 +
}
 +
 
 +
.previous_btn:hover, .next_btn:hover {
 +
  opacity: 1;
 +
}
 +
 
 +
@media only screen and (max-width: 767px) {
 +
  .previous_btn {
 +
    left: 50px;
 +
  }
 +
  .next_btn {
 +
    right: 50px;
 +
  }
 +
}
 +
</style>
 +
 
 +
<script>
 +
$('.slider').each(function() {
 +
  var $this = $(this);
 +
  var $group = $this.find('.slide_group');
 +
  var $slides = $this.find('.slide');
 +
  var bulletArray = [];
 +
  var currentIndex = 0;
 +
  var timeout;
 +
 
 +
  function move(newIndex) {
 +
    var animateLeft, slideLeft;
 +
   
 +
    advance();
 +
   
 +
    if ($group.is(':animated') || currentIndex === newIndex) {
 +
      return;
 +
    }
 +
   
 +
    bulletArray[currentIndex].removeClass('active');
 +
    bulletArray[newIndex].addClass('active');
 +
   
 +
    if (newIndex > currentIndex) {
 +
      slideLeft = '100%';
 +
      animateLeft = '-100%';
 +
    } else {
 +
      slideLeft = '-100%';
 +
      animateLeft = '100%';
 +
    }
 +
   
 +
    $slides.eq(newIndex).css({
 +
      display: 'block',
 +
      left: slideLeft
 +
    });
 +
    $group.animate({
 +
      left: animateLeft
 +
    }, function() {
 +
      $slides.eq(currentIndex).css({
 +
        display: 'none'
 +
      });
 +
      $slides.eq(newIndex).css({
 +
        left: 0
 +
      });
 +
      $group.css({
 +
        left: 0
 +
      });
 +
      currentIndex = newIndex;
 +
    });
 +
  }
 +
 
 +
  function advance() {
 +
    clearTimeout(timeout);
 +
    timeout = setTimeout(function() {
 +
      if (currentIndex < ($slides.length - 1)) {
 +
        move(currentIndex + 1);
 +
      } else {
 +
        move(0);
 +
      }
 +
    }, 4000);
 +
  }
 +
 
 +
  $('.next_btn').on('click', function() {
 +
    if (currentIndex < ($slides.length - 1)) {
 +
      move(currentIndex + 1);
 +
    } else {
 +
      move(0);
 +
    }
 +
  });
 +
 
 +
  $('.previous_btn').on('click', function() {
 +
    if (currentIndex !== 0) {
 +
      move(currentIndex - 1);
 +
    } else {
 +
      move(3);
 +
    }
 +
  });
 +
 
 +
  $.each($slides, function(index) {
 +
    var $button = $('<a class="slide_btn">&bull;</a>');
 +
   
 +
    if (index === currentIndex) {
 +
      $button.addClass('active');
 +
    }
 +
    $button.on('click', function() {
 +
      move(index);
 +
    }).appendTo('.slide_buttons');
 +
    bulletArray.push($button);
 +
  });
 +
 
 +
  advance();
 +
});
 +
</script>
 +
 
 +
<div class="slider">
 +
  <div class="slide_viewer">
 +
    <div class="slide_group">
 +
      <div class="slide">
 +
      </div>
 +
      <div class="slide">
 +
      </div>
 +
      <div class="slide">
 +
      </div>
 +
      <div class="slide">
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div><!-- End // .slider -->
 +
 
 +
<div class="slide_buttons">
 +
</div>
 +
 
 +
<div class="directional_nav">
 +
  <div class="previous_btn" title="Previous">
 +
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65px" height="65px" viewBox="-11 -11.5 65 66">
 +
      <g>
 +
        <g>
 +
          <path fill="#474544" d="M-10.5,22.118C-10.5,4.132,4.133-10.5,22.118-10.5S54.736,4.132,54.736,22.118
 +
c0,17.985-14.633,32.618-32.618,32.618S-10.5,40.103-10.5,22.118z M-8.288,22.118c0,16.766,13.639,30.406,30.406,30.406 c16.765,0,30.405-13.641,30.405-30.406c0-16.766-13.641-30.406-30.405-30.406C5.35-8.288-8.288,5.352-8.288,22.118z"/>
 +
          <path fill="#474544" d="M25.43,33.243L14.628,22.429c-0.433-0.432-0.433-1.132,0-1.564L25.43,10.051c0.432-0.432,1.132-0.432,1.563,0 c0.431,0.431,0.431,1.132,0,1.564L16.972,21.647l10.021,10.035c0.432,0.433,0.432,1.134,0,1.564 c-0.215,0.218-0.498,0.323-0.78,0.323C25.929,33.569,25.646,33.464,25.43,33.243z"/>
 +
        </g>
 +
      </g>
 +
    </svg>
 +
  </div>
 +
  <div class="next_btn" title="Next">
 +
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65px" height="65px" viewBox="-11 -11.5 65 66">
 +
      <g>
 +
        <g>
 +
          <path fill="#474544" d="M22.118,54.736C4.132,54.736-10.5,40.103-10.5,22.118C-10.5,4.132,4.132-10.5,22.118-10.5 c17.985,0,32.618,14.632,32.618,32.618C54.736,40.103,40.103,54.736,22.118,54.736z M22.118-8.288 c-16.765,0-30.406,13.64-30.406,30.406c0,16.766,13.641,30.406,30.406,30.406c16.768,0,30.406-13.641,30.406-30.406 C52.524,5.352,38.885-8.288,22.118-8.288z"/>
 +
          <path fill="#474544" d="M18.022,33.569c 0.282,0-0.566-0.105-0.781-0.323c-0.432-0.431-0.432-1.132,0-1.564l10.022-10.035 L17.241,11.615c 0.431-0.432-0.431-1.133,0-1.564c0.432-0.432,1.132-0.432,1.564,0l10.803,10.814c0.433,0.432,0.433,1.132,0,1.564 L18.805,33.243C18.59,33.464,18.306,33.569,18.022,33.569z"/>
 +
        </g>
 +
      </g>
 +
    </svg>
 +
  </div>
 +
</div><!-- End // .directional_nav -->
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 +
</html>

Revision as of 02:07, 22 October 2019