Team:Imperial College/Templates/Carousel2

From 2013.igem.org

(Difference between revisions)
Line 32: Line 32:
   </ul>
   </ul>
</div>
</div>
-
<div id="slider" class="flexslider">
+
<div id="carousel" class="flexslider">
   <ul class="slides">
   <ul class="slides">
     <li>
     <li>
-
       <img src="slide1.jpg" />
+
       <img src="https://static.igem.org/mediawiki/2013/4/44/Mountains4.png" >
     </li>
     </li>
     <li>
     <li>
-
       <img src="slide2.jpg" />
+
       <img src="https://static.igem.org/mediawiki/2013/f/f8/Very_stressed_ecoli.jpg">
     </li>
     </li>
     <li>
     <li>
-
       <img src="slide3.jpg" />
+
       <img src="https://static.igem.org/mediawiki/2013/0/0e/Jar_of_SRF.jpg" style="width: 100%; height: 100%">
     </li>
     </li>
     <li>
     <li>
-
       <img src="slide4.jpg" />
+
       <img src="https://static.igem.org/mediawiki/2013/2/25/Waste_cocktail.png">
 +
    </li>
 +
    <li>
 +
    <img src="https://static.igem.org/mediawiki/2013/2/2b/PBS_Plus_Waste.jpg">
 +
    </li>
 +
    <li>
 +
    <img src="https://static.igem.org/mediawiki/2013/9/9e/CombinedBacteriaArt.jpg">
     </li>
     </li>
     <!-- items mirrored twice, total of 12 -->
     <!-- items mirrored twice, total of 12 -->
Line 88: Line 94:
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" type="text/css">
 
-
<script src="//cdn.jsdelivr.net/slidesjs/3.0.1/jquery.slides.min.js" type="text/javascript"></script>
 
-
  <style>
 
-
    #slides {
 
-
      color: #232525;
 
-
      display: none;
 
-
      position: relative;
 
-
      text-align: center;
 
-
      margin-bottom: 1em;
 
-
    }
 
-
 
-
    #slides .slidesjs-navigation {
 
-
      cursor: pointer;
 
-
      -webkit-transition: all 300ms ease;
 
-
      -moz-transition: all 300ms ease;
 
-
      -ms-transition: all 300ms ease;
 
-
      -o-transition: all 300ms ease;
 
-
      transition: all 300ms ease;
 
-
    }
 
-
 
-
    #slides .slidesjs-navigation.slidesjs-previous,
 
-
    #slides .slidesjs-navigation.slidesjs-next {
 
-
      position: absolute;
 
-
      top: 0;
 
-
      bottom: 0;
 
-
      height: 100%;
 
-
      line-height: 548px;
 
-
      width: 100px;
 
-
      opacity: 0.75;
 
-
      padding: 0 10px 0 10px;
 
-
      z-index: 1000;
 
-
      background: transparent;
 
-
    }
 
-
 
-
    #slides .slidesjs-navigation.slidesjs-previous > i.icon-3x,
 
-
    #slides .slidesjs-navigation.slidesjs-next > i.icon-3x {
 
-
      line-height: 548px;
 
-
    }
 
-
 
-
    #slides .slidesjs-navigation:hover {
 
-
      opacity: 1;
 
-
    }
 
-
 
-
    #slides .slidesjs-navigation.slidesjs-previous {
 
-
      left: 0;
 
-
      text-align: left;
 
-
    }
 
-
 
-
    #slides .slidesjs-navigation.slidesjs-previous:hover {
 
-
      background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
 
-
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
 
-
      background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
 
-
      background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
 
-
      background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
 
-
      background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
 
-
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
 
-
    }
 
-
 
-
    #slides .slidesjs-navigation.slidesjs-next {
 
-
      right: 0;
 
-
      text-align: right;
 
-
    }
 
-
 
-
    #slides .slidesjs-navigation.slidesjs-next:hover {
 
-
      background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
 
-
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
 
-
      background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
 
-
      background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
 
-
      background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
 
-
      background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
 
-
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
 
-
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80ffffff',GradientType=1 ); /* IE6-9 */
 
-
    }
 
-
 
-
    #slides .slidesjs-pagination {
 
-
      float: none;
 
-
      text-align: center;
 
-
      display: inline-block;
 
-
    }
 
-
 
-
    #slides .slide {
 
-
      position: relative;
 
-
      width: 975px;
 
-
      height: 548px;
 
-
    }
 
-
 
-
    #slides .slide span.background {
 
-
      width: 100%;
 
-
      height: 100%;
 
-
    }
 
-
 
-
    #slides .slide span.background > * {
 
-
      width: 100%;
 
-
      height: 100%;
 
-
    }
 
-
 
-
    #slides .slide span.text {
 
-
      text-align: left;
 
-
      color: #ffffff;
 
-
      background: rgba(0, 0, 0, 0.75);
 
-
      border-left: 5px solid #008AC3;
 
-
      padding: 10px;
 
-
      position: absolute;
 
-
      bottom: 30px;
 
-
      left: 20px;
 
-
      max-width: 65%;
 
-
      z-index: 1000;
 
-
      -webkit-transition: all 300ms ease;
 
-
      -moz-transition: all 300ms ease;
 
-
      -ms-transition: all 300ms ease;
 
-
      -o-transition: all 300ms ease;
 
-
      transition: all 300ms ease;
 
-
      opacity: 1;
 
-
    }
 
-
 
-
    #slides .slide span.text:hover {
 
-
      opacity: 0.25;
 
-
    }
 
-
 
-
    a.slidesjs-next,
 
-
    a.slidesjs-previous,
 
-
    a.slidesjs-play,
 
-
    a.slidesjs-stop {
 
-
      background-image: url('/wiki/images/f/f9/UESTC_btns-next-prev.png');
 
-
      background-repeat: no-repeat;
 
-
      display:block;
 
-
      width:12px;
 
-
      height:18px;
 
-
      overflow: hidden;
 
-
      text-indent: -9999px;
 
-
      float: left;
 
-
      margin-right:5px;
 
-
    }
 
-
 
-
    a.slidesjs-next {
 
-
      margin-right:10px;
 
-
      background-position: -12px 0;
 
-
    }
 
-
 
-
    a:hover.slidesjs-next {
 
-
      background-position: -12px -18px;
 
-
    }
 
-
 
-
    a.slidesjs-previous {
 
-
      background-position: 0 0;
 
-
    }
 
-
 
-
    a:hover.slidesjs-previous {
 
-
      background-position: 0 -18px;
 
-
    }
 
-
 
-
    a.slidesjs-play {
 
-
      width:15px;
 
-
      background-position: -25px 0;
 
-
    }
 
-
 
-
    a:hover.slidesjs-play {
 
-
      background-position: -25px -18px;
 
-
    }
 
-
 
-
    a.slidesjs-stop {
 
-
      width:18px;
 
-
      background-position: -41px 0;
 
-
    }
 
-
 
-
    a:hover.slidesjs-stop {
 
-
      background-position: -41px -18px;
 
-
    }
 
-
 
-
    .slidesjs-pagination {
 
-
      margin: 7px 0 0;
 
-
      float: right;
 
-
      list-style: none;
 
-
    }
 
-
 
-
    .slidesjs-pagination li {
 
-
      float: left;
 
-
      margin: 0 1px;
 
-
    }
 
-
 
-
    .slidesjs-pagination li a {
 
-
      display: block;
 
-
      width: 13px;
 
-
      height: 0;
 
-
      padding-top: 13px;
 
-
      background-image: url('/wiki/images/0/0f/UESTC_pagination.png');
 
-
      background-position: 0 0;
 
-
      float: left;
 
-
      overflow: hidden;
 
-
    }
 
-
 
-
    .slidesjs-pagination li a.active,
 
-
    .slidesjs-pagination li a:hover.active {
 
-
      background-position: 0 -13px
 
-
    }
 
-
 
-
    .slidesjs-pagination li a:hover {
 
-
      background-position: 0 -26px
 
-
    }
 
-
 
-
    #slides a:link,
 
-
    #slides a:visited {
 
-
      color: #333
 
-
    }
 
-
 
-
    #slides a:hover,
 
-
    #slides a:active {
 
-
      color: #9e2020
 
-
    }
 
-
 
-
    .navbar {
 
-
      overflow: hidden
 
-
    }
 
-
    #slides {
 
-
      display: none
 
-
    }
 
-
 
-
    .container {
 
-
      margin: 0 auto
 
-
    }
 
-
 
-
  </style>
 
-
 
-
  <script type="text/javascript">
 
-
    $(function() {
 
-
      $('#slides').slidesjs({
 
-
        width: 975,
 
-
        height: 548,
 
-
        play: {
 
-
          active: false,
 
-
          auto: true,
 
-
          interval: 4000,
 
-
          pauseOnHover: true,
 
-
          restartDelay: 10000
 
-
        },
 
-
        navigation: {
 
-
          active: false
 
-
        }
 
-
      });
 
-
    });
 
-
  </script>
 
-
 
-
<div class="container">
 
-
    <div id="slides">
 
-
      <div class="slidesjs-previous slidesjs-navigation">
 
-
        <i class="icon-chevron-left icon-3x"></i>
 
-
      </div>
 
-
      <div class="slidesjs-next slidesjs-navigation">
 
-
        <i class="icon-chevron-right icon-3x"></i>
 
-
      </div>
 
-
      <!--   
 
-
      <div class="slide">
 
-
        <span class="background"><iframe width="975" height="548" src="//www.youtube.com/embed/RfiQYRn7fBg?rel=0" frameborder="0" allowfullscreen></iframe></span>
 
-
        <span class="text">Put text here</span>
 
-
      </div>
 
-
      -->   
 
-
<div class="slide">
 
-
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/4/44/Mountains4.png" style="width: 100%; height: 100%"></span>
 
-
        <span class="text">Europe's Newest Mountain, Mount Wasted</span>
 
-
      </div>
 
-
    <div class="slide">
 
-
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/f/f8/Very_stressed_ecoli.jpg"></span>
 
-
        <span class="text">Production of the red pigment by stress induction. MG1655 were grown with LB media and sterile filtrated WCM for 48 hours.</span>
 
-
      </div>
 
-
    <div class="slide">
 
-
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/0/0e/Jar_of_SRF.jpg" style="width: 100%; height: 100%"></span>
 
-
        <span class="text">Solid Recovered Fuel (SRF)</span>
 
-
      </div>
 
-
    <div class="slide">
 
-
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/2/25/Waste_cocktail.png"></span>
 
-
        <span class="text"><b>(A)</b> WCM precursor material, this sterilised media made from LB and SRF was used to produce all WCM utilised. <b>(B)</b> Cells containing mCherry pigment grown in SRF <b>(A)</b> over 3 days, then streaked in a qualitative assay to check for growth. <b>(C)</b> mCherry cells were streaked again after 7 days growth in SRF. </span>
 
-
      </div> 
 
-
    <div class="slide">
 
-
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/2/2b/PBS_Plus_Waste.jpg"></span>
 
-
        <span class="text"><b>(A)</b> SRF in PBS (phosphate buffered saline), a buffer. We can see from this experiment whether our bacteria can grow solely on the waste SRF. <b>(B)</b> Cells containing mCherry pigment grown in SRF <b>(A)</b> over 3 days, then streaked in a qualitative assay to check for growth. <b>(C)</b> mCherry cells were streaked again after 6 days growth in SRF. </span>
 
-
      </div>
 
-
      <div class="slide">
 
-
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/9/9e/CombinedBacteriaArt.jpg"></span>
 
-
        <span class="text">Cultured bacteria performing arts.</span>
 
-
      </div> 
 
-
    </div>
 
-
  </div>
 
-
</div>
 
</html>
</html>

Revision as of 19:01, 1 October 2013

Retrieved from "http://2013.igem.org/Team:Imperial_College/Templates/Carousel2"