Difference between revisions of "Template:Team:Michigan/carousel"

 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
    <head>
−
<!-- Latest compiled and minified CSS -->
+
        <!-- slick CSS -->
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
        <meta charset="UTF-8">
 +
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
 +
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
 +
    </head>
 +
    <body>
 +
        <style>
 +
            body {
 +
                background: #777;
 +
            }
 +
            div.slider {
 +
                width: 1000px;
 +
                height: 500px;
 +
                background: #fff;
 +
                margin: 100px auto;
 +
            }
 +
            img.slider {
 +
                width: 100%;
 +
                height: 100%;
 +
            }
 +
          .slick-arrow::before {
 +
                color: #00274C;
 +
            }
 +
        </style>
 +
        <div class="slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "dots": true}'>
 +
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/7/75/AptapaperLogo.jpg"></div>
 +
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/6/65/Proximity-Dependent_Ligation_Diagram.png"></div>
 +
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/b/b7/MSBT_Expression_Diagram.png"></div>
 +
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/7/75/AptapaperLogo.jpg"></div>
 +
        </div>
 +
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 +
        <!--jQuery-->
 +
        <!--<script src="/components/jquery-1.12.3.min.js"></script>-->
 +
        <!--Slick-->
 +
        <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
 +
        <!-- Applying slick to our div -->
 +
        <script>
 +
            $('.slider').slick({
 +
            autoplay: true,
 +
            fade: false});
  
−
<!-- Latest compiled and minified JavaScript -->
+
        </script>
−
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
     </body>
−
</head>
+
−
<body>
+
−
 
+
−
<div class="container">
+
−
<div class="span2">
+
−
<div id="myCarousel" class="carousel slide" data-ride="carousel">
+
−
  <!-- Indicators -->
+
−
  <ol class="carousel-indicators">
+
−
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
−
    <li data-target="#myCarousel" data-slide-to="1"></li>
+
−
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
−
    <li data-target="#myCarousel" data-slide-to="3"></li>
+
−
  </ol>
+
−
 
+
−
  <!-- Wrapper for slides -->
+
−
  <div class="carousel-inner" role="listbox">
+
−
    <div class="item active">
+
−
      <img src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="Chania">
+
−
    </div>
+
−
 
+
−
    <div class="item">
+
−
      <img src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="Chania">
+
−
    </div>
+
−
 
+
−
    <div class="item">
+
−
      <img src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="Flower">
+
−
    </div>
+
−
 
+
−
    <div class="item">
+
−
      <img src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="Flower">
+
−
    </div>
+
−
  </div>
+
−
 
+
−
  <!-- Left and right controls -->
+
−
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+
−
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+
−
    <span class="sr-only">Previous</span>
+
−
  </a>
+
−
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+
−
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+
−
    <span class="sr-only">Next</span>
+
−
  </a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</body>
+
 
</html>
 
</html>

Latest revision as of 03:39, 17 October 2016