leemark

var opts = {
            //auto-advancing slides? accepts boolean (true/false) or object
            auto : { 
                // speed to advance slides at. accepts number of milliseconds
                speed : 2500, 
                // pause advancing on mouseover? accepts boolean
                pauseOnHover : true 
            },
            // show fullscreen toggle? accepts boolean
            fullScreen : true, 

leemark

<script>
  makeBSS('.slideshow-class-goes-here');
</script>

leemark

<div class="bss-slides num1" tabindex="1" autofocus="autofocus">
    <figure>
      <img src="demo/img/medium.jpg" width="100%" /><figcaption>"Medium" by <a href="https://www.flickr.com/photos/thomashawk/14586158819/">Thomas Hawk</a>.</figcaption> 
    </figure>
    <figure>
      <img src="demo/img/colorado.jpg" width="100%" /><figcaption>"Colorado" by <a href="https://www.flickr.com/photos/stuckincustoms/88370744">Trey Ratcliff</a>.</figcaption> 
    </figure>
    <figure>
      <img src="demo/img/monte-vista.jpg" width="100%" /><figcaption>"Early Morning at the Monte Vista Wildlife Refuge, Colorado" by <a href="https://www.flickr.com/photos/davesoldano/8572429635">Dave Soldano</a>.</figcaption> 
    </figure>

leemark

<script src="demo/js/hammer.min.js"></script><!-- for swipe support on touch interfaces -->
<script src="js/better-simple-slideshow.min.js"></script>
<script>
var opts = {
    auto : {
        speed : 3500, 
        pauseOnHover : true
    },
    fullScreen : false, 
    swipe : true

leemark

<div class="bss-slides num2" tabindex="2">
   <figure>
      <img src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg" width="100%" /><figcaption>"Snowying" by <a href="http://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption> 
   </figure>
    <figure>
        <img src="http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg" width="100%" /><figcaption>"Starlight" by <a href="http://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption> 
   </figure>
   <figure>
      <img src="http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="http://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption> 
   </figure>

leemark

<script src="js/better-simple-slideshow.min.js"></script>
<script>
var opts = {
    auto : false,
    fullScreen : true,
    swipe : false
};
makeBSS('.num2', opts);
</script>

leemark

Location and path of the ISS

International Space Station: http://www.nasa.gov/mission_pages/station/main/

A Pen by Mark Lee on CodePen.

License.

leemark

<form>
  
  <!-- email input type, required - the form won't submit if empty -->
  <input type="email" id="youremail" placeholder="you@example.com" required />
  <label for="youremail">your email</label>
  
  <!-- url input type, optional - form will submit if empty, but if you do enter a value it needs to conform to URL type validation -->
  <input type="url" id="yourwebsite" placeholder="http://example.com" />
  <label for="yourwebsite">your website</label>
  

leemark

<div class="container" id="main">
<nav>
  <h1>Navigation</h1>
  <ul>
    <li><a href="#lorem">Lorem ipsum dolor sit amet.</a></li>
    <li><a href="#invenitatis">In venenatis auctor eros sed rhoncus.</a></li>
    <li><a href="#utinorci">Ut in orci enim.</a></li>
    <li><a href="#donecdiam">Donec diam dolor.</a></li>
    <li><a href="#donectortor">Donec tortor mi.</a></li>
  </ul>  

leemark

<ul>
  <li data-email="jim@example.com">Jim</li>
  <li data-email="julie@example.com">Julie</li>
  <li data-email="jay@example.com">Jay</li>
  <li data-email="jennie@example.com">Jennie</li>
</ul>