Team:AUC TURKEY

From 2014hs.igem.org

(Difference between revisions)
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&amp;text=Slide+1">
 +
</li>
 +
<li>
 +
<img src="http://dummyimage.com/800x400/ddd/000&amp;text=Slide+2">
 +
</li>
 +
<li>
 +
<img src="http://dummyimage.com/800x400/ccc/000&amp;text=Slide+3">
 +
</li>
 +
<li>
 +
<img src="http://dummyimage.com/800x400/bbb/000&amp;text=Slide+4">
 +
</li>
 +
<li>
 +
<img src="http://dummyimage.com/800x400/ccc/000&amp;text=Slide+5">
 +
</li>
 +
<li>
 +
<img src="http://dummyimage.com/800x400/ddd/000&amp;text=Slide+6">
 +
</li>
 +
<li>
 +
<img src="http://dummyimage.com/800x400/eee/000&amp;text=Slide+7">
 +
</li>
 +
</ul>
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 14:37, 11 June 2014

Back to top Take a Tour




sdasd