hunterbridges · August 2, 2012 05:13
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Carousel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
      div.hider {
        overflow:hidden;
        width:200px;
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width:800px;
        position: relative;
      }

      li {
        height:200px;
        width:200px;
        margin: 0;
        padding: 0;
        float:left;
      }

      li.red { background-color: red; }
      li.blue { background-color: blue; }
      li.green { background-color: green; }
      li.purple { background-color: purple; }

      span.red { color: red; }
      span.blue { color: blue; }
      span.green { color: green; }
      span.purple { color: purple; }

      .clearfix {
        clear:both;
      }
    </style>
  </head>
  <body>
    <div class="hider">
      <ul>
        <li class="red current" rel="red"></li>
        <li class="blue" rel="blue"></li>
        <li class="green" rel="green"></li>
        <li class="purple" rel="purple"></li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
    <p class="filtered">
      <span class="red">Cats</span>
      <span class="blue">Dogs</span>
      <span class="green">Pelicans</span>
      <span class="purple">Deer</span>
      <span class="red">Fish</span>
      <span class="blue">Asparagus</span>
      <span class="green">Beer</span>
      <span class="purple">Moose</span>
    </p>

    <script type="text/javascript">
      $(document).ready(function() {
        var filter = function($current) {
          var rel = $current.attr('rel');
          var $spans = $('p.filtered span');
          var $matched = $spans.filter('.' + rel);
          var $unmatched = $spans.not($matched);
          $matched.show();
          $unmatched.hide();
        };

        var seekTo = function($current, $next) {
          if ($next.length > 0) {
            $current.removeClass('current');
            $next.addClass('current');

            filter($next);

            var $ul = $next.parents('ul');
            $ul.stop().animate({
              marginLeft: -$next.position().left
            }, 300);
          }
        };

        $('a.prev').on('click', function(e) {
          var $current = $('li.current');
          var $prev = $current.prev();
          seekTo($current, $prev);
        });

        $('a.next').on('click', function(e) {
          var $current = $('li.current');
          var $next = $current.next();
          seekTo($current, $next);
        });

        filter($('li.current'));
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Carousel</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style>
	div.hider {
	overflow:hidden;
	width:200px;
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width:800px;
	position: relative;
	}

	li {
	height:200px;
	width:200px;
	margin: 0;
	padding: 0;
	float:left;
	}

	li.red { background-color: red; }
	li.blue { background-color: blue; }
	li.green { background-color: green; }
	li.purple { background-color: purple; }

	span.red { color: red; }
	span.blue { color: blue; }
	span.green { color: green; }
	span.purple { color: purple; }

	.clearfix {
	clear:both;
	}
	</style>
	</head>
	<body>
	<div class="hider">
	<ul>
	<li class="red current" rel="red"></li>
	<li class="blue" rel="blue"></li>
	<li class="green" rel="green"></li>
	<li class="purple" rel="purple"></li>
	</ul>
	<div class="clearfix"></div>
	</div>
	<a href="#" class="prev">Prev</a>
	<a href="#" class="next">Next</a>
	<p class="filtered">
	<span class="red">Cats</span>
	<span class="blue">Dogs</span>
	<span class="green">Pelicans</span>
	<span class="purple">Deer</span>
	<span class="red">Fish</span>
	<span class="blue">Asparagus</span>
	<span class="green">Beer</span>
	<span class="purple">Moose</span>
	</p>

	<script type="text/javascript">
	$(document).ready(function() {
	var filter = function($current) {
	var rel = $current.attr('rel');
	var $spans = $('p.filtered span');
	var $matched = $spans.filter('.' + rel);
	var $unmatched = $spans.not($matched);
	$matched.show();
	$unmatched.hide();
	};

	var seekTo = function($current, $next) {
	if ($next.length > 0) {
	$current.removeClass('current');
	$next.addClass('current');

	filter($next);

	var $ul = $next.parents('ul');
	$ul.stop().animate({
	marginLeft: -$next.position().left
	}, 300);
	}
	};

	$('a.prev').on('click', function(e) {
	var $current = $('li.current');
	var $prev = $current.prev();
	seekTo($current, $prev);
	});

	$('a.next').on('click', function(e) {
	var $current = $('li.current');
	var $next = $current.next();
	seekTo($current, $next);
	});

	filter($('li.current'));
	});
	</script>
	</body>
	</html>