Horizontal scroll, with autoScroll on.

Horizontal scroll will scroll from right to left.

  var exampleOne = new Budgie(
    sampleElements,
    '#example-1',
    {
      'numberHigh': 2,
      'numberWide': 4,
      'secondsOnPage': 15.0,
      'direction': 'horizontal',
      'autoScroll': true
    }
  );

Inverted Horizontal scroll, with autoScroll on.

Inverted horizontal scroll with scroll from left to right.

  var exampleTwo = new Budgie(
    sampleElements,
    '#example-2',
    {
      'numberHigh': 1,
      'numberWide': 3,
      'secondsOnPage': 15.0,
      'direction': 'horizontal',
      'autoScroll': true
    }
  );

Vertical scroll, with autoScroll on.

Vertical scroll will scroll from top to bottom.

  var exampleThree = new Budgie(
    sampleElements,
    '#example-3',
    {
      'numberHigh': 2,
      'numberWide': 3,
      'secondsOnPage': 15.0,
      'direction': 'vertical',
      'autoScroll': true
    }
  );

Inverted vertical scroll, with autoScroll on.

Inverted vertical scroll with scroll from bottom to top.

  var exampleFour = new Budgie(
    sampleElements,
    '#example-4',
    {
      'numberHigh': 2,
      'numberWide': 4,
      'secondsOnPage': 15.0,
      'direction': 'vertical',
      'inverted': true,
      'autoScroll': true
    }
  );

AutoScroll Off vertical scroll

With autoScroll off the user will have to scroll the list, via touch and drag, or the mousewheel.

  var exampleFive = new Budgie(
    sampleElements,
    '#example-5',
    {
      'numberHigh': 2,
      'numberWide': 4,
      'direction': 'vertical',
      'autoScroll': false
    }
  );

AutoScroll Off horizontal scroll

With autoScroll off the user will have to scroll the list, via touch and drag, or the mousewheel.

  var exampleSix = new Budgie(
    sampleElements,
    '#example-6',
    {
      'numberHigh': 1,
      'numberWide': 4,
      'direction': 'horizontal',
      'autoScroll': false
    }
  );

InfiniteScroll Off

With InfiniteScroll off the list will stop when it reaches the end of the list.

  var exampleSeven = new Budgie(
    sampleElements,
    '#example-7',
    {
      'numberHigh': 1,
      'numberWide': 5,
      'direction': 'horizontal',
      'autoScroll': false,
      'infiniteScroll': false
    }
  );

Pop demonstration

an element off the list and watch Budgie update.

  var exampleEight = new Budgie(
    sampleElements,
    '#example-8',
    {
      'numberHigh': 2,
      'numberWide': 3,
      'secondsOnPage': 10.0,
      'direction': 'horizontal',
      'autoScroll': true
    }
  );

  // Code to pop elements off the list
  exampleEight.items.pop();

Push demonstration

an element onto the list and watch Budgie update.

  var exampleNine = new Budgie(
    sampleElements,
    '#example-9',
    {
      'numberHigh': 2,
      'numberWide': 3,
      'secondsOnPage': 10.0,
      'direction': 'horizontal',
      'autoScroll': true
    }
  );

  // Code to push elements onto the list
  exampleNine.items.push(sampleElement);

Shift demonstration

an element off the list and watch Budgie update.

  var exampleTen = new Budgie(
    sampleElements,
    '#example-10',
    {
      'numberHigh': 2,
      'numberWide': 3,
      'secondsOnPage': 10.0,
      'direction': 'horizontal',
      'autoScroll': true
    }
  );

  // Code to shift elements off the list
  exampleEight.items.shift();

Unshift demonstration

an element onto the list and watch Budgie update.

  var exampleEleven = new Budgie(
    sampleElements,
    '#example-11',
    {
      'numberHigh': 2,
      'numberWide': 3,
      'secondsOnPage': 10.0,
      'direction': 'horizontal',
      'autoScroll': true
    }
  );

  // Code to push elements onto the list
  exampleEleven.items.unshift(sampleElement);