Line 5: | Line 5: | ||
</head> | </head> | ||
<head> | <head> | ||
+ | |||
+ | <title>W3.CSS</title> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> | ||
+ | <style> | ||
+ | .mySlides {display:none} | ||
+ | .w3-left, .w3-right, .w3-badge {cursor:pointer} | ||
+ | .w3-badge {height:13px;width:13px;padding:0} | ||
+ | </style> | ||
+ | <body> | ||
<div class="w3-container"> | <div class="w3-container"> | ||
Line 12: | Line 22: | ||
<div class="w3-content w3-display-container" style="max-width:800px"> | <div class="w3-content w3-display-container" style="max-width:800px"> | ||
− | <img class="mySlides" src=" | + | <img class="mySlides" src="img_nature_wide.jpg" style="width:100%"> |
− | <img class="mySlides" src=" | + | <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%"> |
− | <img class="mySlides" src=" | + | <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%"> |
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%"> | <div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%"> | ||
<div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> | <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> |
Revision as of 11:01, 26 July 2016
Slideshow Indicators
An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.
❮
❯