"
Template:Team:Marburg/Template:JSlider
From 2014.igem.org
(Difference between revisions)
m |
|||
| Line 1: | Line 1: | ||
<html></p> | <html></p> | ||
| + | <style> | ||
| + | body { | ||
| + | -webkit-font-smoothing: antialiased; | ||
| + | font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| + | color: #232525; | ||
| + | padding-top:70px; | ||
| + | } | ||
| + | |||
| + | #slides { | ||
| + | display: none | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-navigation { | ||
| + | margin-top:3px; | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-previous { | ||
| + | margin-right: 5px; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-next { | ||
| + | margin-right: 5px; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | .slidesjs-pagination { | ||
| + | margin: 6px 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(img/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 | ||
| + | } | ||
| + | </style> | ||
| + | <!-- End SlidesJS Optional--> | ||
| + | |||
| + | <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow --> | ||
| + | <style> | ||
| + | #slides { | ||
| + | display: none | ||
| + | } | ||
| + | |||
| + | .container { | ||
| + | margin: 0 auto | ||
| + | } | ||
| + | |||
| + | /* For tablets & smart phones */ | ||
| + | @media (max-width: 767px) { | ||
| + | body { | ||
| + | padding-left: 20px; | ||
| + | padding-right: 20px; | ||
| + | } | ||
| + | .container { | ||
| + | width: auto | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* For smartphones */ | ||
| + | @media (max-width: 480px) { | ||
| + | .container { | ||
| + | width: auto | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* For smaller displays like laptops */ | ||
| + | @media (min-width: 768px) and (max-width: 979px) { | ||
| + | .container { | ||
| + | width: 724px | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* For larger displays */ | ||
| + | @media (min-width: 1200px) { | ||
| + | .container { | ||
| + | width: 1170px | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
<div class="container"> | <div class="container"> | ||
<div id="slides"> | <div id="slides"> | ||
| Line 10: | Line 125: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | <!-- SlidesJS Required: Link to jquery.slides.js --> | ||
| + | <script type="text/javascript" src="2014.igem.org/Template:Team:Marburg/Template:JSlider.js?action=raw"></script> | ||
| + | <!-- End SlidesJS Required --> | ||
| + | |||
| + | <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready --> | ||
| + | <script> | ||
| + | $(function() { | ||
| + | $('#slides').slidesjs({ | ||
| + | width: 940, | ||
| + | height: 528, | ||
| + | navigation: false | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | <!-- End SlidesJS Required --> | ||
</html> | </html> | ||
