%META:TOPICINFO{author="ProjectContributor" date="1693915616" format="1.1" version="1"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%
%JQPLUGINS{"serialscroll"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
This plugin allows you to easily animate any series of elements, by sequentially scrolling them.
It uses JQueryScrollTo to achieve the scrolling animation.
%ENDSECTION{"summary"}%

---++ Examples
%JQREQUIRE{"serialscroll"}%
<div id="screen1">
<div id="slideshow">
<ul>
  <li><img width="225" height="300" src="//source.unsplash.com/featured/250x300?leafs" /></li>
  <li><img width="225" height="300" src="//source.unsplash.com/featured/250x300?trees" /></li>
  <li><img width="225" height="300" src="//source.unsplash.com/featured/250x300?cars" /></li>
  <li><img width="225" height="300" src="//source.unsplash.com/featured/250x300?people" /></li>
  <li><img width="225" height="300" src="//source.unsplash.com/featured/250x300?city" /></li>
  <li><img width="225" height="300" src="//source.unsplash.com/featured/250x300?neon" /></li>
</ul>
</div>
  <div id="buttons">
    <a class="prev" href="#">Previous</a>
    <a class="next" href="#">Next</a>
  %CLEAR%
  </div>
</div>

<literal>
<script>
(function($) {
  $(function() {
    $('#slideshow').serialScroll({
      items:'li',
      prev:'#screen1 a.prev',
      next:'#screen1 a.next',
      offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left)
      start:1, //as we are centering it, start at the 2nd
      duration:1200,
      force:true,
      stop:true,
      lock:false,
      cycle:false, //don't pull back once you reach the end
      easing:'easeOutQuart', //use this easing equation for a funny effect
      jump: true //click on the images to scroll to them
    });
  });
})(jQuery);
</script>

<style>
#slideshow{
  overflow:hidden;
  width:680px;
  border:1px solid var(--color-border, #eee);
}

#slideshow ul{
  padding:0;
  margin:0;
  list-style:none;
  width:3900px;
  padding-left:225px;
}

#slideshow li{
  padding:0;
  list-style:none;
  float:left;
  margin:0 16px;
  cursor:pointer;
}
.next,
.prev {
   display:inline-block;
   margin:1em 1em 0 0;
}
</style>
</literal>
