Team:AUC TURKEY
From 2014hs.igem.org
(Difference between revisions)
Edipunluer (Talk | contribs) |
Edipunluer (Talk | contribs) |
||
Line 19: | Line 19: | ||
} | } | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | <style type="text/css"> | ||
+ | .slider { | ||
+ | position: relative; | ||
+ | overflow: auto; | ||
+ | width: 80%; | ||
+ | margin: 1em auto; | ||
+ | } | ||
+ | .js .slider { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .slider > ul { | ||
+ | position: relative; | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-size: 0; | ||
+ | word-spacing: -.3em; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | .slider > ul > li { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | *display: inline; | ||
+ | *zoom: 1; | ||
+ | vertical-align: top; | ||
+ | font-size: 14px; | ||
+ | word-spacing: 0; | ||
+ | white-space: normal; | ||
+ | } | ||
+ | |||
+ | .slider > ul > .next:first-child { | ||
+ | left: 100%; | ||
+ | } | ||
+ | .slider > ul > .prev.last-child { | ||
+ | right: 100%; | ||
+ | } | ||
+ | .slider > ul > .target:first-child, | ||
+ | .slider > ul > .target.last-child { | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | |||
+ | .slider > ul > li > img { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .slider .nav { | ||
+ | z-index: 1; | ||
+ | background: #fff; | ||
+ | text-align: center; | ||
+ | transition: opacity 2s; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .slider.ready .nav { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .slider .nav a { | ||
+ | display: inline-block; | ||
+ | margin: 1em .5em; | ||
+ | padding: 0; | ||
+ | border: none; | ||
+ | width: 2em; | ||
+ | line-height: 2em; | ||
+ | background: #999; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | text-align: center; | ||
+ | border-radius: 999px; | ||
+ | cursor: pointer; | ||
+ | -webkit-transition: all .2s; | ||
+ | transition: all .2s; | ||
+ | } | ||
+ | .slider .nav a:hover { | ||
+ | background: #666; | ||
+ | } | ||
+ | .slider .nav a.active { | ||
+ | background: #000; | ||
+ | } | ||
+ | |||
+ | /* position nav items above slideshow with arrows on left/right side */ | ||
+ | .slider .nav > span { | ||
+ | position: absolute; | ||
+ | bottom: 10px; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | .slider .nav > a { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | margin-top: -21px; | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | .slider .nav > .back { | ||
+ | left: 20px; | ||
+ | } | ||
+ | .slider .nav > .forth { | ||
+ | right: 20px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
Line 82: | Line 187: | ||
}); | }); | ||
</script> | </script> | ||
+ | </body> | ||
+ | |||
+ | <body> | ||
+ | <div class="slider js_slider" data-autorotate="5"> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <img src="http://dummyimage.com/800x400/eee/000&text=Slide+1"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="http://dummyimage.com/800x400/ddd/000&text=Slide+2"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="http://dummyimage.com/800x400/ccc/000&text=Slide+3"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="http://dummyimage.com/800x400/bbb/000&text=Slide+4"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="http://dummyimage.com/800x400/ccc/000&text=Slide+5"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="http://dummyimage.com/800x400/ddd/000&text=Slide+6"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="http://dummyimage.com/800x400/eee/000&text=Slide+7"> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 14:37, 11 June 2014
sdasd