|
|
| (8 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| - | <head>
| |
| - | <style type="text/css">
| |
| - | /*
| |
| - | * jQuery FlexSlider v2.0
| |
| - | * http://www.woothemes.com/flexslider/
| |
| - | *
| |
| - | * Copyright 2012 WooThemes
| |
| - | * Free to use under the GPLv2 license.
| |
| - | * http://www.gnu.org/licenses/gpl-2.0.html
| |
| - | *
| |
| - | * Contributing author: Tyler Smith (@mbmufffin)
| |
| - | */
| |
| - | /* Browser Resets */
| |
| - | .flex-container a:active,
| |
| - | .flexslider a:active,
| |
| - | .flex-container a:focus,
| |
| - | .flexslider a:focus{
| |
| - | outline:none;
| |
| - | }
| |
| - | .slides,
| |
| - | .flex-control-nav,
| |
| - | .flex-direction-nav{
| |
| - | margin:0;
| |
| - | padding:0;
| |
| - | list-style:none;
| |
| - | }
| |
| - | /* FlexSlider Necessary Styles
| |
| - | *********************************/
| |
| - | .flexslider{
| |
| - | margin:0;
| |
| - | padding:0;
| |
| - | }
| |
| - | .flexslider .slides > li{
| |
| - | display:none;
| |
| - | -webkit-backface-visibility:hidden;
| |
| - | -moz-backface-visibility:hidden;
| |
| - | -ms-backface-visibility:hidden;
| |
| - | -o-backface-visibility:hidden;
| |
| - | backface-visibility:hidden;
| |
| - | }
| |
| - | /* Hide the slides before the JS is loaded. Avoids image jumping */
| |
| - | .flexslider .slides img{
| |
| - | width:100%;
| |
| - | display:block;
| |
| - | }
| |
| - | .flex-pauseplay span{
| |
| - | text-transform:capitalize;
| |
| - | }
| |
| - | /* Clearfix for the .slides element */
| |
| - | .flexslider a.intro {
| |
| - | bottom:0;
| |
| - | color:rgba(0, 0, 0, 0.1);
| |
| - | font-size:14px;
| |
| - | position:absolute;
| |
| - | right:0;
| |
| - | text-decoration:none;
| |
| - | z-index:99999;
| |
| - | }
| |
| - | .slides:after{
| |
| - | content:".";
| |
| - | display:block;
| |
| - | clear:both;
| |
| - | visibility:hidden;
| |
| - | line-height:0;
| |
| - | height:0;
| |
| - | }
| |
| - | html[xmlns] .slides{
| |
| - | display:block;
| |
| - | }
| |
| - | * html .slides{
| |
| - | height:1%;
| |
| - | }
| |
| - | /* No JavaScript Fallback */
| |
| - | /* If you are not using another script, such as Modernizr, make sure you
| |
| - | * include js that eliminates this class on page load */
| |
| - | .no-js .slides > li:first-child{
| |
| - | display:block;
| |
| - | }
| |
| - | /* FlexSlider Default Theme
| |
| - | *********************************/
| |
| - | .flexslider{
| |
| - | margin:0 0 60px;
| |
| - | background:#fff;
| |
| - | border:4px solid #fff;
| |
| - | position:relative;
| |
| - | -webkit-border-radius:4px;
| |
| - | -moz-border-radius:4px;
| |
| - | border-radius:4px;
| |
| - | -webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
| |
| - | -moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
| |
| - | box-shadow:0 1px 4px rgba(0,0,0,.2);
| |
| - | zoom:1;
| |
| - | }
| |
| - | .flex-viewport{
| |
| - | max-height:2000px;
| |
| - | -webkit-transition:all 1s ease;
| |
| - | -moz-transition:all 1s ease;
| |
| - | -o-transition:all 1s ease;
| |
| - | transition:all 1s ease;
| |
| - | }
| |
| - | .loading .flex-viewport{
| |
| - | max-height:300px;
| |
| - | }
| |
| - | .flexslider .slides{
| |
| - | zoom:1;
| |
| - | }
| |
| - | .carousel li{
| |
| - | margin-right:5px;
| |
| - | }
| |
| - | /* Direction Nav */
| |
| - | .flexslider li {
| |
| - | border: 0 none !important;
| |
| - | padding: 0 !important;
| |
| - | text-indent: 0 !important;
| |
| - | }
| |
| - | .flex-direction-nav a{
| |
| - | width:30px;
| |
| - | height:30px;
| |
| - | margin:-20px 0 0;
| |
| - | display:block;
| |
| - | background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
| |
| - | position:absolute;
| |
| - | top:50%;
| |
| - | cursor:pointer;
| |
| - | text-indent:-9999px;
| |
| - | opacity:0;
| |
| - | -webkit-transition:all .3s ease;
| |
| - | -moz-transition:all .3s ease;
| |
| - | -o-transition:all .3s ease;
| |
| - | transition:all .3s ease;
| |
| - | }
| |
| - | .flex-direction-nav .flex-next{
| |
| - | background-position:100% 0;
| |
| - | right:-36px;
| |
| - | }
| |
| - | .flex-direction-nav .flex-prev{
| |
| - | left:-36px;
| |
| - | }
| |
| - | .flexslider:hover .flex-next{
| |
| - | opacity:0.8;
| |
| - | right:5px;
| |
| - | }
| |
| - | .flexslider:hover .flex-prev{
| |
| - | opacity:0.8;
| |
| - | left:5px;
| |
| - | }
| |
| - | .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
| |
| - | opacity:1;
| |
| - | }
| |
| - | .flex-direction-nav .disabled{
| |
| - | opacity:.3!important;
| |
| - | filter:alpha(opacity=30);
| |
| - | cursor:default;
| |
| - | }
| |
| - | /* Control Nav */
| |
| - | .flex-control-nav{
| |
| - | width:100%;
| |
| - | position:absolute;
| |
| - | bottom:-40px;
| |
| - | text-align:center;
| |
| - | }
| |
| - | .flex-control-nav li{
| |
| - | margin:0 6px;
| |
| - | display:inline-block;
| |
| - | zoom:1;
| |
| - | *display:inline;
| |
| - | }
| |
| - | .flex-control-paging li a{
| |
| - | width:11px;
| |
| - | height:11px;
| |
| - | display:block;
| |
| - | background:#666;
| |
| - | background:rgba(0,0,0,0.5);
| |
| - | cursor:pointer;
| |
| - | text-indent:-9999px;
| |
| - | -webkit-border-radius:20px;
| |
| - | -moz-border-radius:20px;
| |
| - | border-radius:20px;
| |
| - | -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
| |
| - | -moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
| |
| - | box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
| |
| - | }
| |
| - | .flex-control-paging li a:hover{
| |
| - | background:#333;
| |
| - | background:rgba(0,0,0,0.7);
| |
| - | }
| |
| - | .flex-control-paging li a.flex-active{
| |
| - | background:#000;
| |
| - | background:rgba(0,0,0,0.9);
| |
| - | cursor:default;
| |
| - | }
| |
| - | .flex-control-thumbs{
| |
| - | margin:5px 0 0;
| |
| - | position:static;
| |
| - | overflow:hidden;
| |
| - | }
| |
| - | .flex-control-thumbs li{
| |
| - | width:25%;
| |
| - | float:left;
| |
| - | margin:0;
| |
| - | }
| |
| - | .flex-control-thumbs img{
| |
| - | width:100%;
| |
| - | display:block;
| |
| - | opacity:.7;
| |
| - | cursor:pointer;
| |
| - | }
| |
| - | .flex-control-thumbs img:hover{
| |
| - | opacity:1;
| |
| - | }
| |
| - | .flex-control-thumbs .active{
| |
| - | opacity:1;
| |
| - | cursor:default;
| |
| - | }
| |
| - | </style>
| |
| - | <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
| |
| - | <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready(function(){
| |
| - | $(window).load(function() {
| |
| - | $('.flexslider').flexslider({
| |
| - | animation: "slide",
| |
| - | animationLoop: false,
| |
| - | itemWidth: 210,
| |
| - | itemMargin: 0,
| |
| - | minItems: 1,
| |
| - | maxItems: 1
| |
| - | });
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - | </head>
| |
| | <body> | | <body> |
| | <div class="flexslider"> | | <div class="flexslider"> |
| | <ul class="slides"> | | <ul class="slides"> |
| | <li> | | <li> |
| - | <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" /> | + | <img src="https://static.igem.org/mediawiki/2014/2/2b/NCTUOVERVIEW.jpg" /> |
| | </li> | | </li> |
| | <li> | | <li> |
| - | <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" /> | + | <img src="https://static.igem.org/mediawiki/2014/6/64/NCTUPBAN.jpg" /> |
| | </li> | | </li> |
| | <li> | | <li> |
| - | <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" /> | + | <img src="https://static.igem.org/mediawiki/2014/b/ba/NCTUDEVICE.jpg" /> |
| | </li> | | </li> |
| - |
| |
| | </ul> | | </ul> |
| | </div> | | </div> |
| | </body> | | </body> |
| | </html> | | </html> |
"
