Team:Korea U Seoul/template/contents slider

From 2013.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 4: Line 4:
          
          
         <style>
         <style>
-
             .slider{width: 1000px; height: 400px; position: relative;}
+
             .slider{padding:5px 100px; width: 943px; height: 352px; position: relative;}
-
             .slider > img { width: 1000px; height: 400px;}
+
             .slider > img { width: 943px; height: 352px;}
-
             .slider_navi{position: absolute; bottom: 10px; left: 10px;}
+
             .slider_navi{position: absolute; bottom: 30px; left: 110px;}
-
             .slider_navi > span {background-color: #FFFFFF; margin: 10px; cursor: pointer}
+
             .slider_navi > span {background-color: #242424; margin: 10px; cursor: pointer; padding: 5px 7px; color: #FFFFFF;}
         </style>
         </style>
     </head>
     </head>
     <body>
     <body>
-
         <div class="slider" style="border:1px solid red">
+
        <div style="width:100%;">
-
             <img src="http://static4.depositphotos.com/1006994/448/v/950/depositphotos_4482997-Party-banner-background.jpg">
+
         <div class="slider" style="border-radius:10px; margin:0 auto;">
-
             <img src="http://static4.depositphotos.com/1006994/448/v/950/depositphotos_4482997-Party-banner-background.jpg">
+
             <img src="https://static.igem.org/mediawiki/2013/thumb/d/db/Sliders1.png/800px-Sliders1.png">
-
             <img src="http://static4.depositphotos.com/1006994/448/v/950/depositphotos_4482997-Party-banner-background.jpg">
+
             <img src="https://static.igem.org/mediawiki/2013/thumb/4/40/Sliders2.png/800px-Sliders2.png">
-
             <img src="http://static4.depositphotos.com/1006994/448/v/950/depositphotos_4482997-Party-banner-background.jpg">
+
             <img src="https://static.igem.org/mediawiki/2013/thumb/4/40/Sliders3.png/800px-Sliders3.png">
 +
             <img src="https://static.igem.org/mediawiki/2013/thumb/1/13/Sliders4.png/800px-Sliders4.png">
 +
            <img src="https://static.igem.org/mediawiki/2013/thumb/7/71/Sliders5.png/800px-Sliders5.png">
             <div class="slider_navi">
             <div class="slider_navi">
             </div>
             </div>
 +
        </div>
         </div>
         </div>
     </body>
     </body>
     <script>
     <script>
         var slider = $(".slider");
         var slider = $(".slider");
-
             slider.width(1000);
+
             slider.width(943);
-
             slider.height(400);
+
             slider.height(352);
         var slider_navi = $(".slider_navi");
         var slider_navi = $(".slider_navi");
         var imgs = slider.children("img");
         var imgs = slider.children("img");
Line 30: Line 33:
         imgs.each(function(){
         imgs.each(function(){
             $(this).hide();
             $(this).hide();
-
             slider_navi.append("<span onclick=\"slide_img("+i+")\">"+(i+1)+"</span>");
+
             slider_navi.append("<span style='font-family: David; font-size: 14pt;' onclick=\"slide_img("+i+")\">"+(i+1)+"</span>");
             i++;
             i++;
         })
         })

Latest revision as of 23:34, 27 September 2013