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

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"/>
−
<!-- Latest compiled and minified JavaScript -->
+
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
−
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
    </head>
−
</head>
+
    <body>
−
<body>
+
        <style>
−
 
+
            body {
−
<div class="container">
+
                background: #777;
−
<div class="span2">
+
            }
−
<div id="myCarousel" class="carousel slide" data-ride="carousel">
+
            div.slider {
−
  <!-- Indicators -->
+
                width: 400px;
−
  <ol class="carousel-indicators">
+
                height: 200px;
−
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
                background: #fff;
−
    <li data-target="#myCarousel" data-slide-to="1"></li>
+
                margin: 100px auto;
−
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
            }
−
    <li data-target="#myCarousel" data-slide-to="3"></li>
+
            img.slider {
−
  </ol>
+
                width: 100%;
−
 
+
                height: 100%;
−
  <!-- Wrapper for slides -->
+
            }
−
  <div class="carousel-inner" role="listbox">
+
        </style>
−
    <div class="item active">
+
        <div class="slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "dots": true}'>
−
      <img src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="Chania">
+
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png"></div>
−
    </div>
+
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png"></div>
−
 
+
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png"></div>
−
    <div class="item">
+
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png"></div>
−
      <img src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="Chania">
+
        </div>
−
    </div>
+
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
−
 
+
        <!--jQuery-->
−
    <div class="item">
+
        <!--<script src="/components/jquery-1.12.3.min.js"></script>-->
−
      <img src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="Flower">
+
        <!--Slick-->
−
    </div>
+
        <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
−
 
+
        <!-- Applying slick to our div -->
−
    <div class="item">
+
        <script>
−
      <img src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="Flower">
+
            $('.slider').slick();
−
    </div>
+
        </script>
−
  </div>
+
    </body>
−
 
+
−
  <!-- 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>

Revision as of 20:24, 10 August 2016