Team:Imperial College/Templates/Carousel
From 2013.igem.org
(Difference between revisions)
Line 5: | Line 5: | ||
#slides { | #slides { | ||
color: #232525; | color: #232525; | ||
- | display: none | + | display: none; |
+ | poition: relative; | ||
} | } | ||
#slides .slidesjs-navigation { | #slides .slidesjs-navigation { | ||
- | + | position: absolute; | |
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | height: 100%; | ||
+ | line-height: 100%; | ||
+ | width: 36px; | ||
+ | opacity: 0.5; | ||
+ | -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:hover { | ||
+ | background-color: rgba(255, 255, 255, 0.5); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #slides .slidesjs-navigation.slidesjs-previous { | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | #slides .slidesjs-navigation.slidesjs-next { | ||
+ | right: 0; | ||
} | } | ||
Line 144: | Line 169: | ||
</style> | </style> | ||
- | <script> | + | <script type="text/javascript"> |
$(function() { | $(function() { | ||
$('#slides').slidesjs({ | $('#slides').slidesjs({ | ||
Line 164: | Line 189: | ||
<div class="container"> | <div class="container"> | ||
<div id="slides"> | <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"> | <div class="slide"> |
Revision as of 20:59, 16 September 2013