Team:Imperial College/Templates/Carousel
From 2013.igem.org
(Difference between revisions)
(19 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" type="text/css"> | <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> | <script src="//cdn.jsdelivr.net/slidesjs/3.0.1/jquery.slides.min.js" type="text/javascript"></script> | ||
<style> | <style> | ||
Line 8: | Line 7: | ||
display: none; | display: none; | ||
position: relative; | position: relative; | ||
- | text-align: center | + | text-align: center; |
+ | margin-bottom: 1em; | ||
} | } | ||
#slides .slidesjs-navigation { | #slides .slidesjs-navigation { | ||
cursor: pointer; | 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; | ||
} | } | ||
Line 22: | Line 27: | ||
height: 100%; | height: 100%; | ||
line-height: 548px; | line-height: 548px; | ||
- | width: | + | width: 100px; |
opacity: 0.75; | opacity: 0.75; | ||
padding: 0 10px 0 10px; | padding: 0 10px 0 10px; | ||
- | - | + | z-index: 1000; |
- | + | background: transparent; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Line 39: | Line 40: | ||
#slides .slidesjs-navigation:hover { | #slides .slidesjs-navigation:hover { | ||
- | |||
opacity: 1; | opacity: 1; | ||
} | } | ||
Line 46: | Line 46: | ||
left: 0; | left: 0; | ||
text-align: left; | 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 */ | ||
} | } | ||
Line 51: | Line 61: | ||
right: 0; | right: 0; | ||
text-align: right; | 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 */ | ||
} | } | ||
Line 76: | Line 97: | ||
#slides .slide span.text { | #slides .slide span.text { | ||
+ | text-align: left; | ||
color: #ffffff; | color: #ffffff; | ||
background: rgba(0, 0, 0, 0.75); | background: rgba(0, 0, 0, 0.75); | ||
Line 85: | Line 107: | ||
max-width: 65%; | max-width: 65%; | ||
z-index: 1000; | 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; | ||
} | } | ||
Line 197: | Line 229: | ||
height: 548, | height: 548, | ||
play: { | play: { | ||
- | active: | + | active: false, |
auto: true, | auto: true, | ||
interval: 4000, | interval: 4000, | ||
- | + | pauseOnHover: true, | |
+ | restartDelay: 10000 | ||
}, | }, | ||
navigation: { | navigation: { | ||
Line 242: | Line 275: | ||
<span class="background"><img src="https://static.igem.org/mediawiki/2013/2/2b/PBS_Plus_Waste.jpg"></span> | <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> | <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> |
+ | <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 | + | </div> |
</div> | </div> | ||
</html> | </html> |
Latest revision as of 12:14, 30 September 2013