<commit_before><!doctype html>
<html lang="en">
<head>
  <title>Snapper Demo</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="../dist/snapper.css">
  <link rel="stylesheet" href="docs.css" />
  <link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
  <script src="../src/lib/jquery.js"></script>
  <script src="../src/lib/overthrow-toss.js"></script>
  <script src="../src/snapper.js"></script>
  <style>
  .snapper {
  	max-width: 30em;
  }
  .snapper_nav img {
    max-width: 50px;
  }
  </style>
  <script src="/demo-head/loadfont.js"></script>
  <script>
    document.documentElement.className += "enhanced";
    $(function(){
      $( document ).trigger( "enhance" );
    });
  </script>
</head>
<body>
  <div class="demo-header">
    <div class="company">
      <img src="https://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
    </div>
    <div class="details">
      <p class="description-container">Demo of <span class="repo-name">Snapper.js</span>
        <span class="description">A CSS Snap Points Helper and Polyfill</span>
      </p>
      <ul class="outbound-links">
        <li><a href="https://github.com/filamentgroup/snapper">Code</a></li>
        <li><a href="https://github.com/filamentgroup/snapper/issues">Issues</a></li>
      </ul>
    </div>
  </div>
  <div class="nav-container">
		<div class="docs-globalnav">
			<nav class="docs-nav">
			<a href="index.html">Thumbnails</a>
			<a href="nextprev.html">Next/Prev Links (w/ dot nav)</a>
      <a href="breakpoints.html">Breakpoints (w/ next/prev)</a>
			</nav>
		</div>
	</div>
  <div class="docs-main">


<h2 class="docs">Basic Snapper example</h2>
<p class="docs">A snapper carousel with some thumbnail links. By default, item widths are calculated evenly based on the number of total items, so that one item fills 100% of the scroll pane at a time, and the scroller snaps to each item.</p>
<p class="docs"> Thumbnails are just regular links to a slide's ID attribute. The scrollbar is cropped from sight using the optional <code>snapper_pane_crop</code> div (only recommended when thumbnails or next/prev navigation is in play).</p>
<div class="snapper">
  <div class="snapper_pane_crop">
    <div class="snapper_pane">
      <div class="snapper_items">
        <div class="snapper_item" id="img-a2">
          <img src="imgs/monkey.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-b2">
          <img src="imgs/large.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-c2">
          <img src="imgs/monks.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-d2">
          <img src="imgs/interior.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-e2">
          <img src="imgs/cows.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-f2">
          <img src="imgs/bike.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
  <a href="#" id="testlink">just a test link</a>

  <div class="snapper_nav">
    <a href="#img-a2"><img src="imgs/monkey-thmb.jpg" alt=""></a>
    <a href="#img-b2"><img src="imgs/large-thmb.jpg" alt=""></a><commit_msg>remove test link from demo<commit_after><!doctype html>
<html lang="en">
<head>
  <title>Snapper Demo</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="../dist/snapper.css">
  <link rel="stylesheet" href="docs.css" />
  <link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
  <script src="../src/lib/jquery.js"></script>
  <script src="../src/lib/overthrow-toss.js"></script>
  <script src="../src/snapper.js"></script>
  <style>
  .snapper {
  	max-width: 30em;
  }
  .snapper_nav img {
    max-width: 50px;
  }
  </style>
  <script src="/demo-head/loadfont.js"></script>
  <script>
    document.documentElement.className += "enhanced";
    $(function(){
      $( document ).trigger( "enhance" );
    });
  </script>
</head>
<body>
  <div class="demo-header">
    <div class="company">
      <img src="https://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
    </div>
    <div class="details">
      <p class="description-container">Demo of <span class="repo-name">Snapper.js</span>
        <span class="description">A CSS Snap Points Helper and Polyfill</span>
      </p>
      <ul class="outbound-links">
        <li><a href="https://github.com/filamentgroup/snapper">Code</a></li>
        <li><a href="https://github.com/filamentgroup/snapper/issues">Issues</a></li>
      </ul>
    </div>
  </div>
  <div class="nav-container">
		<div class="docs-globalnav">
			<nav class="docs-nav">
			<a href="index.html">Thumbnails</a>
			<a href="nextprev.html">Next/Prev Links (w/ dot nav)</a>
      <a href="breakpoints.html">Breakpoints (w/ next/prev)</a>
			</nav>
		</div>
	</div>
  <div class="docs-main">


<h2 class="docs">Basic Snapper example</h2>
<p class="docs">A snapper carousel with some thumbnail links. By default, item widths are calculated evenly based on the number of total items, so that one item fills 100% of the scroll pane at a time, and the scroller snaps to each item.</p>
<p class="docs"> Thumbnails are just regular links to a slide's ID attribute. The scrollbar is cropped from sight using the optional <code>snapper_pane_crop</code> div (only recommended when thumbnails or next/prev navigation is in play).</p>
<div class="snapper">
  <div class="snapper_pane_crop">
    <div class="snapper_pane">
      <div class="snapper_items">
        <div class="snapper_item" id="img-a2">
          <img src="imgs/monkey.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-b2">
          <img src="imgs/large.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-c2">
          <img src="imgs/monks.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-d2">
          <img src="imgs/interior.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-e2">
          <img src="imgs/cows.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-f2">
          <img src="imgs/bike.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="snapper_nav">
    <a href="#img-a2"><img src="imgs/monkey-thmb.jpg" alt=""></a>
    <a href="#img-b2"><img src="imgs/large-thmb.jpg" alt=""></a>
{'fraction_non_alphanumeric': 0.1918668550792903, 'fraction_numerical': 0.0053383576699638875, 'mean_word_length': 3.171578258022266, 'pattern_counts': {'":': 0, '<': 203, '<?xml version=': 0, '>': 203, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4462492', 'n_tokens_mistral': 2306, 'n_tokens_neox': 2226, 'n_words': 495}