Team:Imperial College/Templates:carousel

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-targ...")
 
(One intermediate revision not shown)
Line 2: Line 2:
<div id="myCarousel" class="carousel slide">
<div id="myCarousel" class="carousel slide">
-
  <ol class="carousel-indicators">
+
    <ol class="carousel-indicators">
-
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
        <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="1"></li>
-
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
        <li data-target="#myCarousel" data-slide-to="2"></li>
-
  </ol>
+
    </ol>
 +
 
   <!-- Carousel items -->
   <!-- Carousel items -->
-
  <div class="carousel-inner">
+
    <div class="carousel-inner">
-
    <div class="active item">
+
     
-
        <img src="https://static.igem.org/mediawiki/2013/4/44/Mountains4.png">
+
        <div class="active item">
-
        <div class="carousel-caption">
+
            <img src="https://static.igem.org/mediawiki/2013/4/44/Mountains4.png">
-
            <h4>Europe's Newest Mountain, Mount Wasted</h4>
+
            <div class="carousel-caption">
-
            <p></p>
+
                <h4>Europe's Newest Mountain, Mount Wasted</h4>
-
        </div>         
+
                <p></p>
-
    </div>
+
            </div>         
-
    <div class="item">
+
-
        <img src="https://static.igem.org/mediawiki/2013/f/f8/Very_stressed_ecoli.jpg">
+
-
        <div class="carousel-caption">
+
-
            <h4>Stressed Ecoli</h4>
+
-
            <p>Production of the red pigment by stress induction. MG1655 were grown with LB media and sterile filtrated WCM for 48 hours.</p>
+
         </div>
         </div>
 +
       
 +
        <div class="item">
 +
            <img src="https://static.igem.org/mediawiki/2013/f/f8/Very_stressed_ecoli.jpg">
 +
            <div class="carousel-caption">
 +
                <h4>Stressed Ecoli</h4>
 +
                <p>Production of the red pigment by stress induction. MG1655 were grown with LB media and sterile filtrated WCM for 48 hours.</p>
 +
            </div>
 +
        </div>
 +
       
 +
        <div class="item">
 +
            <img src="https://static.igem.org/mediawiki/2013/0/0e/Jar_of_SRF.jpg">
 +
            <div class="carousel-caption">
 +
                <h4>Solid Recovered Fuel (SRF)</h4>
 +
                <p></p>
 +
            </div>
 +
        </div>
 +
   
     </div>
     </div>
-
    <div class="item">
+
 
-
        <img src="https://static.igem.org/mediawiki/2013/0/0e/Jar_of_SRF.jpg">
+
     <!-- Carousel nav -->
-
        <div class="carousel-caption">
+
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
-
            <h4>Solid Recovered Fuel (SRF)</h4>
+
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
-
            <p></p>
+
-
     </div>
+
-
  </div>
+
-
  <!-- Carousel nav -->
+
-
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+
-
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+
</div>
</div>
<script>
<script>
-
$('.carousel').carousel();
+
$('#myCarousel').carousel();
</script>
</script>
</html>
</html>

Latest revision as of 23:11, 11 September 2013