SOURCE CODE: Scrolly Carousel
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Scrolly Carousel | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="featured animation widget Uize.Widget.Scrolly"/>
  <meta name="description" content="See the scrolly widget being used to create a scrollable carousel, where scrolling through the pages is accompanied by a JavaScript animation effect."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.slideshow.css"/>

  <style type="text/css">
    .scrollyCarousel {
      margin:auto;
      border-width:5px;
      border-style:solid;
      position:relative;
    }
    .scrollyCarousel, .scrollyView, .scrollyView .carouselFrame {
      width:500px;
      height:232px;
      overflow:hidden;
      position:relative;
    }
    .scrollyView .carouselFrame {
      position:absolute;
      top:0;
    }
    .scrollyView .carouselFrame img {
      position:absolute;
      left:0;
      top:0;
      width:500px;
      height:232px;
    }
    .scrollyView .carouselFrame .carouselFrameTitle {
      position:absolute;
      width:100%;
      height:50px;
      font-size:43px;
      letter-spacing:5px;
      font-weight:bold;
      text-align:center;
      color:#ccc;
      background:#234;
      border:1px solid #888;
      border-left:none;
      border-right:none;
      bottom:5px;
      opacity:.4;
      filter:alpha(opacity=40);
    }
    .navButton {
      position:absolute!important;
      bottom:17px;
      opacity:.7;
      filter:alpha(opacity=70);
    }
    .navButtonGrayed {
      opacity:.1;
      filter:alpha(opacity=10);
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Scrolly Carousel
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/scrolly-carousel.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.Scrolly.html"><code>Uize.Widget.Scrolly</code></a> class creates a carousel scrolly that lets you step through a series of pages, with an accompanying JavaScript animation effect. Each "page" has its own div tag containing its HTML, and each page follows the same layout and shares the same CSS. Of course, each page <b>could</b> really be totally different - as long as every page is the width of the scrolly's <code>view</code> node. Imagine such an interface on a company's homepage, with pages like "<b>About Us</b>", "<b>Products</b>", "<b>Services</b>", etc. Click the next and previous navigation arrows (shift-click to scroll all the way to the first or last pages). Below the scrolly are some links to demo the scrolly's programmatic interface.</p>
  </div>

  <!-- scrolly UI -->

  <div class="scrollyCarousel insetBorderColor">
    <div id="page_scrolly-view" class="scrollyView">
      <div class="carouselFrame" style="left:0;">
        <img src="../js/UizeSite/TestData/Fruits/apples-large.jpg"/>
        <div class="carouselFrameTitle">APPLES</div>
      </div>
      <div class="carouselFrame" style="left:500px;">
        <img src="../js/UizeSite/TestData/Fruits/grapefruits-large.jpg"/>
        <div class="carouselFrameTitle">GRAPEFRUITS</div>
      </div>
      <div class="carouselFrame" style="left:1000px;">
        <img src="../js/UizeSite/TestData/Fruits/mangos-large.jpg"/>
        <div class="carouselFrameTitle">MANGOS</div>
      </div>
      <div class="carouselFrame" style="left:1500px;">
        <img src="../js/UizeSite/TestData/Fruits/plums-large.jpg"/>
        <div class="carouselFrameTitle">PLUMS</div>
      </div>
      <div class="carouselFrame" style="left:2000px;">
        <img src="../js/UizeSite/TestData/Fruits/strawberries-large.jpg"/>
        <div class="carouselFrameTitle">STRAWBERRIES</div>
      </div>
    </div>
    <a id="page_scrolly_left" href="javascript://" class="navButton" style="left:10px;"><div class="arrow towardsFirst gotoPrevious"></div></a>
    <a id="page_scrolly_right" href="javascript://" class="navButton" style="right:10px;"><div class="arrow towardsLast gotoNext"></div></a>
  </div>
  <br/>

  <!-- programmatic interface examples -->

  <div class="programmaticInterface">
    <p><b>scrolly.get ('pageX') == </b>'<span id="page-scrollyPageX"></span>'</p>
    <p>
      <b>Set the pageX for the scrolly widget: </b>
      <a href="javascript://" class="linkedJs">scrolly.set ({pageX:0})</a>
      &nbsp;,&nbsp;
      <a href="javascript://" class="linkedJs">scrolly.set ({pageX:1})</a>
      &nbsp;,&nbsp;
      <a href="javascript://" class="linkedJs">scrolly.set ({pageX:2})</a>
      &nbsp;,&nbsp;
      <a href="javascript://" class="linkedJs">scrolly.set ({pageX:3})</a>
      &nbsp;,&nbsp;
      <a href="javascript://" class="linkedJs">scrolly.set ({pageX:4})</a>
    </p>
  </div>
</div>

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Scrolly'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** add the scrolly child widgets ***/
      var scrolly = page.addChild ('scrolly',Uize.Widget.Scrolly);
      scrolly.fade.set ({duration:550});

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** some code for demonstrating the widget's programmatic interface ***/
      function updateScrollyStateDisplay () {
        page.setNodeInnerHtml ('scrollyPageX',scrolly.get ('pageX'));
      }
      scrolly.wire ('Changed.pageX',updateScrollyStateDisplay);
      updateScrollyStateDisplay ();
  }
);

</script>

</body>
</html>