Team:Imperial College/Templates/Carousel2
From 2013.igem.org
(Difference between revisions)
Iain Bower (Talk | contribs) (Created page with "<html> <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....") |
Iain Bower (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <script type="text/javascript"> | ||
+ | $(window).load(function() { | ||
+ | // The slider being synced must be initialized first | ||
+ | $('#carousel').flexslider({ | ||
+ | animation: "slide", | ||
+ | controlNav: false, | ||
+ | animationLoop: false, | ||
+ | slideshow: false, | ||
+ | itemWidth: 210, | ||
+ | itemMargin: 5, | ||
+ | asNavFor: '#slider' | ||
+ | }); | ||
+ | |||
+ | $('#slider').flexslider({ | ||
+ | animation: "slide", | ||
+ | controlNav: false, | ||
+ | animationLoop: false, | ||
+ | slideshow: false, | ||
+ | sync: "#carousel" | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <div id="slider" class="flexslider"> | ||
+ | <ul class="slides"> | ||
+ | <li> | ||
+ | <img src="slide1.jpg" /> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="slide2.jpg" /> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="slide3.jpg" /> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="slide4.jpg" /> | ||
+ | </li> | ||
+ | <!-- items mirrored twice, total of 12 --> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="carousel" class="flexslider"> | ||
+ | <ul class="slides"> | ||
+ | <li> | ||
+ | <img src="slide1.jpg" /> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="slide2.jpg" /> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="slide3.jpg" /> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="slide4.jpg" /> | ||
+ | </li> | ||
+ | <!-- items mirrored twice, total of 12 --> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
<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> |
Revision as of 18:34, 1 October 2013