|
|
| Line 1: |
Line 1: |
| | Hi, I'm Bene. The Imperial iGEM team 2013 has asked me for some advice with web development, so here I am! | | Hi, I'm Bene. The Imperial iGEM team 2013 has asked me for some advice with web development, so here I am! |
| - | <html>
| |
| - | <div class="jcarousel-container">
| |
| - | <div class="jcarousel">
| |
| - | <div class="jcarousel-slides">
| |
| - | <div class="jcarousel-slide">
| |
| - | <div class="jcarousel-pic"><iframe width="550" height="400" src="//www.youtube.com/embed/RfiQYRn7fBg?rel=0" frameborder="0" allowfullscreen></iframe></div>
| |
| - | <div class="jcarousel-caption">Put text here</div>
| |
| - | </div>
| |
| - | <div class="jcarousel-slide">
| |
| - | <div class="jcarousel-pic"><img src="https://static.igem.org/mediawiki/2013/4/44/Mountains4.png" style="width: 400px;"></div>
| |
| - | <div class="jcarousel-caption">Europe's Newest Mountain, Mount Wasted</div>
| |
| - | </div>
| |
| - | <div class="jcarousel-slide">
| |
| - | <div class="jcarousel-pic"><iframe width="550" height="400" src="//www.youtube.com/embed/RfiQYRn7fBg?rel=0" frameborder="0" allowfullscreen></iframe></div>
| |
| - | <div class="jcarousel-caption">Put text here</div>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="jcarousel-prev" onclick="$('.jcarousel').jcarousel('scroll', '-=1');"><</div>
| |
| - | <div class="jcarousel-next" onclick="$('.jcarousel').jcarousel('scroll', '+=1');">></div>
| |
| - | </div>
| |
| - |
| |
| - | <style type="text/css">
| |
| - | .jcarousel-container {
| |
| - | position: relative;
| |
| - | border:1px solid black;
| |
| - | padding: 20px 40px;
| |
| - | width: 600px;
| |
| - | }
| |
| - |
| |
| - | .jcarousel {
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - | border:1px solid red;
| |
| - | /* You need at least a height, adjust this to your needs */
| |
| - | height: 500px;
| |
| - | }
| |
| - |
| |
| - | .jcarousel-slides {
| |
| - | width: 20000em;
| |
| - | position: absolute;
| |
| - | list-style: none;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | .jcarousel-slide{
| |
| - | float: left;
| |
| - | width: 600px;
| |
| - | }
| |
| - | .jcarousel-pic{
| |
| - | }
| |
| - | .jcarousel-caption{
| |
| - | }
| |
| - |
| |
| - | .jcarousel-prev, .jcarousel-next {
| |
| - | cursor: pointer;
| |
| - | height: 32px;
| |
| - | position: absolute;
| |
| - | width: 32px;
| |
| - | }
| |
| - | .jcarousel-prev {
| |
| - | /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
| |
| - | left: 5px;
| |
| - | top: 43px;
| |
| - | }
| |
| - | .jcarousel-next {
| |
| - | /*background: url("next-horizontal.png") no-repeat scroll 0 0 transparent;*/
| |
| - | right: 5px;
| |
| - | top: 43px;
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - | <script type="text/javascript" src="https://2013.igem.org/wiki/index.php?title=User:Btb11/jcarousel.js&action=raw&ctype=text/javascript"></script>
| |
| - | <script type="text/javascript">
| |
| - | $(function(){
| |
| - | $('.jcarousel').jcarousel({
| |
| - | wrap:'circular'
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - | </html>
| |
Hi, I'm Bene. The Imperial iGEM team 2013 has asked me for some advice with web development, so here I am!
"
