JSignage:InteractiveTutorial4

Description

Image carousels

• Instantiation of two carousel layers to demonstrate their use.

Source code

$.carousel({
  left: '10%', top: '7%', width: '80%', height: '36%',
  type: 'wheel',
  direction: 'leftToRight',
  looping: true,
  spacing: '10%',
  data: { length: 10 },
  numVisible: 5,
  renderToSVG: function( idx ) {
    return $.media({
      href: 'media/Renoir_29_24/mini/'+(idx+1)+'.jpg',
      preserveAspectRatio: 'none',
      frame: { frameColor: 'white', frameSize: 15 }
    });
  }
}).addTo('svg');

$.carousel({
  left: '10%', top: '55%', width: '80%', height: '40%',
  type: 'squeeze',
  direction: 'leftToRight',
  looping: true,
  spacing: '2%',
  data: { length: 12 },
  numVisible: 7,
  frame: { backColor: 'white', padding: 5 },
  renderToSVG: function( idx ) {
    return $.media({
      href: 'media/Van_gogh_19_24/mini/'+(idx+1)+'.jpg',
      preserveAspectRatio: 'none'
    });
  }
}).addTo('svg');