Carousel append remove

by Plippie Plop

HTML

<script src="http://lab.cubiq.org/iscroll/src/iscroll.js"></script>
<script src="http://ansolas.com/public/js/jquery.mousewheel.js"></script>
    <button id="replaceItems">replace all items</button>
    <button id="appendItem">appendItem</button>
    <div style="width:350px;height:550px;">
        <div id="wrapper">
            <div id="scroller">
                <ul id="thelist">

                </ul>
            </div>
        </div>
        <div id="nav">
            <div id="prev" onclick="myScroll.scrollToPage('prev', 0);mouse=false;return false">&larr; prev</div>
            <div id="next" onclick="myScroll.scrollToPage('next', 0);mouse=false;return false">next &rarr;</div>
            <ul id="indicator">
                <div style="float:left" id="currentPage">1</div>
                <div style="float:left"> / </div>
                <div id="pagenum"></div>
            </ul>
        </div>
    </div>

CSS

body,ul,li {
            padding:10px;
            margin:0;
        }

        body {
            font-size:12px;
            -webkit-user-select:none;
            -webkit-text-size-adjust:none;
            font-family:helvetica;
        }

        #wrapper {
            width:300px;
            height:160px;

            float:left;
            position:relative;    /* On older OS versions "position" and "z-index" must be defined, */
            z-index:1;            /* it seems that recent webkit is less picky and works anyway. */
            overflow:hidden;

            background:#aaa;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            -o-border-radius:10px;
            border-radius:10px;
            background:#e3e3e3;
        }



        #scroller {
          /* width:2100px;*/
         /* width:100%;*/

            float:left;
            padding:0;
        }


        #scroller ul {
            list-style:none;
            display:block;
            float:left;
            width:100%;
            height:160px;
            padding:0;
            margin:0;
            text-align:left;
        }

        #scroller li {
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            -o-box-sizing:border-box;
            box-sizing:border-box;
            display:block; float:left;
            width:300px; height:160px;
            text-align:center;
            font-family:georgia;
            font-size:18px;
            line-height:140%;
        }

        #nav {
            width:300px;
            float:left;
        }

        #prev, #next {
            float:left;
            font-weight:bold;
            font-size:14px;
            padding:5px 0;
            width:80px;
        }

        #next {
            float:right;
            text-align:right;
        }


        #test2 {
            background-color: #333;
            width: 120px;
            height: 100px;
           ...

JavaScript

var carousel = function()
      {
        var myScroll;
       // var currentindex = 1;
        var pagecount=7;
        var itemWidth = 300;
        var mouse = false;

        function initMouseWheel() {
          //$('#userAgent').html(navigator.userAgent);
          $('#wrapper').mousewheel(function(event, delta, deltaX, deltaY)
          {
            mouse= true;
            console.log("myScroll.currPageX", myScroll.currPageX );
            if (delta > 0){
              //o = '#test2: up ('+delta+')';
              myScroll.scrollToPage('next', 0);
              $('#currentPage').html( myScroll.currPageX+1);
              //console.log( delta );
            }else if (delta < 0){
              //o = '#test2: down ('+delta+')';
              myScroll.scrollToPage('prev', 0);
              $('#currentPage').html( myScroll.currPageX+1);
              // console.log( delta );
            }
            // prevent default
            return false;
          });
        }

        function initCarousel()
        {
          myScroll = new iScroll('wrapper', {
            snap: true,
            momentum: false,
            vScroll:false,
            hScrollbar: false,
            onScrollEnd: function ()
            {
              if(mouse===false)
                $('#currentPage').html( myScroll.currPageX+1);
            }
          });
          $('#pagenum').html(myScroll.pagesX.length);
        }



        this.replaceAllItems = function ()
        {
          //myScroll.scrollToPage(0, 0);
          $("#currentPage").html("1");
          var item2add = "<li>New Replaced Content</li>";
          $("#thelist").html(item2add);
          var itemCount =1;
          var new_width = itemCount * itemWidth;
          $("#scroller").css("width",new_width);

          setTimeout(function () { //prefred way to refresh iScroll as suggested in the 'docs'
            myScroll.refresh();
          }, 0);


          setTimeout(function () {
           ...