A question about showing more items in a carousel?

[zhouhao27]

This is the best jquery carousel I've ever seen online. I'm going to extend your example 2 to show more items.

Code in index.html:

<script>
$(function() {
  $.responsiveHub({
    layouts: {
      480:  "phone",
      481:  "small-tablet",
      731:  "tablet",
      1199: "small-web",
      1200:  "web"
    },
    defaultLayout: "web"
  });
});

In css:

.view-port, .track .inner {
   /*original value: width: 946px;*/
   width: 1180px;
}

In example2_and_3.js:

   onChange: function(track, options, event) {
    track.options.mode = "horizontal";
    track.options.autoHeight = false;
    track.options.perPage = 5;

    if (event.layout === "small-web") {
      alert('small-web');
      track.options.perPage = 4;
      if (track.container.hasClass("huge")) {
        track.options.autoHeight = true;
      }          
    } else if (event.layout === "small-tablet") {
      track.options.perPage = 3;
      if (track.container.hasClass("huge")) {
        track.options.autoHeight = true;
      }
    } else if (event.layout === "phone") {
      track.options.perPage = 3;
      track.options.mode = "vertical";
      track.options.autoHeight = true;
    }

    track.restart({keepCurrentPage: true});
  }

Here is the result when browser width is greater than 1200. It looks great:

But when I resize the browser width to less than 1200, it shows part of the items which is not what I expected:

Can you advise what I did wrong? Thanks.