Slider

Responsive image slider component. If you want a thumbnail slider attached to it, you can create the ThumbSlider component (see below for example) in conjunction with the base Slider.

Default Javascript Parameters

slides: ".js-slide"
slidesContainer: ".js-slider-container"
slidesViewport: ".js-slider-viewport"
assetBalance: 2 the number of images to load on either side of is-current
assetReveal: false Must be set to true if setting lazyLoad to true in the component properties.
autoSlideDelay: 0 The delay after which to automatically slide. A value of 0 means this feature is off.
keyboardControl: false Next: R arrow / l / n; Previous: L arrow / h / p
loopAround: false
showPagination: false
showSliderControls: true
transition: "200"
The duration for the slide transitions

Example - Creating an image slider

You can change any slider defaults when the slider is created. For example:
new Slider({ el: ".js-slider", showSliderControls: false, loopAround: true });

ThumbSlider

The ThumbSlider will create a ribbon of thumbnail-sized images beneath the large hero element.

Default Thumbnail Parameters

el: ".js-slider-thumbs" thumbnail reel container
slides: ".js-slide" should match slider setting
thumbs: ".js-thumb-link" class for individual thumbnails
sliderViewport: ".js-slider-viewport" thumbnail element it appended to it
scrollBox: ".js-scrollbox" scrollable thumbnail area
scrollControlls:".js-thumb-arrow" thumbnail left right controlls
listener: document listener should match slider setting
scrollDistance: 300 scroll distance

Example - Creating a slider with a thumbnail reel

In this example, we use a component that determines if the user is on a mobile device, because the thumbnail slider is not responsive, so it shouldn't be used on smaller devices.
define(["lib/components/slider",
       "lib/utils/mobile_helper"], function (Slider, Device) {

  var _listener = window.document;
  var _device = new Device();

  // Create the main hero slider
  new Slider({ el: ".js-slider", assetReveal: true, listener: _listener });

  // Only show the thumbnail slider if not a mobile device
  if (!_device.isMobile()) {
    require(["lib/components/thumb_slider"], function (ThumbSlider) {
      new ThumbSlider({ listener: _listener });
    });
  }
});
Perfume boutique on Vaci utca, Inner Town
Basic slider
= ui_component('slider', properties: {as_below} )
{
  aspectRatio: "16x9",
  lazyLoad: true,
  images: [
    {
      src: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/b4f64ac2a73e69023794511d1de2a03ee4d21ce9483961915003c3878d3bda41/d6bff15e21af0874df3ba713a589ec42659d63cf288b5ee125c3fee732036e06.jpg",
      alt: "Perfume boutique on Vaci utca, Inner Town",
      thumb: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/b4f64ac2a73e69023794511d1de2a03ee4d21ce9483961915003c3878d3bda41/d6bff15e21af0874df3ba713a589ec42659d63cf288b5ee125c3fee732036e06.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/624a285f47df52742ea1c695510ad16a697ceadb2fc9714a9d54410f4775c413/33e5a86bf5d611864cb518ce05d971c5472c5135065702d0fbff601e3b7fd26d.jpg",
      alt: "Communist-era sculptures, Statue Park",
      thumb: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/624a285f47df52742ea1c695510ad16a697ceadb2fc9714a9d54410f4775c413/33e5a86bf5d611864cb518ce05d971c5472c5135065702d0fbff601e3b7fd26d.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/aac3412b82fcdac46b7c6d5463667cf89cdcf40c3f54051b434bae71e05a8a4b/07074d902543e314dcaee4074465de8ebda5dd68414d3abd28e83567014de79d.jpg",
      alt: "Facade of Palace of Art, City Park",
      thumb: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/aac3412b82fcdac46b7c6d5463667cf89cdcf40c3f54051b434bae71e05a8a4b/07074d902543e314dcaee4074465de8ebda5dd68414d3abd28e83567014de79d.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/a5d955a46e904deff73042ac8a34d1ae4ffaa99654eb7efc31e9ee2920f1bcad/660569f9bbaaff90fa1b182cf97d4eebebb33962a448728c47a3984870bcad44.jpg",
      alt: "Parliament building at night",
      thumb: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/a5d955a46e904deff73042ac8a34d1ae4ffaa99654eb7efc31e9ee2920f1bcad/660569f9bbaaff90fa1b182cf97d4eebebb33962a448728c47a3984870bcad44.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/5e1918d5b442e794939022b4d2a3ace4e430aded4361d38f838c59c75f3c0627/b91f54984fed042155790fc8d8d785889433de7a5b93d5981d2e3fb7b005e9e6.jpg",
      alt: "Miksa Roth stained glass window",
      thumb: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/5e1918d5b442e794939022b4d2a3ace4e430aded4361d38f838c59c75f3c0627/b91f54984fed042155790fc8d8d785889433de7a5b93d5981d2e3fb7b005e9e6.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/2fda58ac51c2a18ce4d5c4ac5cc68ad734d8a1b76948efb4b786b85d5f32e565/489c62351cae694a28bfe3d2f2f0d143314b6d70e7d2731c341f42b0f7b35df1.jpg",
      alt: "Detail of facade decoration on Great Synagogue",
      thumb: "https://images-resrc.staticlp.com/C=AR16x9/S=W1000/https://media.lonelyplanet.com/assets/2fda58ac51c2a18ce4d5c4ac5cc68ad734d8a1b76948efb4b786b85d5f32e565/489c62351cae694a28bfe3d2f2f0d143314b6d70e7d2731c341f42b0f7b35df1.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/S=W1000M,H700M/https://media.lonelyplanet.com/a/g/hi/t/3d93e6ae3d54110d9f3c2d87c55af542-royal-palace.jpg",
      alt: "Royal Palace in Budapest.",
      thumb: "https://images-resrc.staticlp.com/S=W1000M,H700M/https://media.lonelyplanet.com/a/g/hi/t/3d93e6ae3d54110d9f3c2d87c55af542-royal-palace.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/S=W1000M,H700M/https://media.lonelyplanet.com/a/g/hi/t/14984340660726b8617baa359a5dc99c-szechenyi-baths.jpg",
      alt: "Széchenyi Baths' outdoor pool.",
      thumb: "https://images-resrc.staticlp.com/S=W1000M,H700M/https://media.lonelyplanet.com/a/g/hi/t/14984340660726b8617baa359a5dc99c-szechenyi-baths.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/S=W1000M,H700M/https://media.lonelyplanet.com/assets/ae329e2e1407712e2e2fdb1458622a045330406da2f677f78785cc58165b2ee7/deec443c7405a09cd52268c9d77e925029280a487ac4aa9c8080c6583da26476.jpg",
      alt: "Nyugati train station at twilight, Terezvaros.",
      thumb: "https://images-resrc.staticlp.com/S=W1000M,H700M/https://media.lonelyplanet.com/assets/ae329e2e1407712e2e2fdb1458622a045330406da2f677f78785cc58165b2ee7/deec443c7405a09cd52268c9d77e925029280a487ac4aa9c8080c6583da26476.jpg"
    },
    {
      src: "https://images-resrc.staticlp.com/S=W1000M,H700M/https://media.lonelyplanet.com/assets/909ad63c5ef9fd79f03d58a9e52d0d1777f21f75e36992755225a86bd16c0c7e/1e1234d616cd0680b91ad4f81ed260d4bb0331387998748b49fff88eda327d6b.jpg",
      alt: "Men playing chess in outdoor pool at Szechenyi.",
      thumb: "https://images-resrc.staticlp.com/S=W1000M,H700M/https://media.lonelyplanet.com/assets/909ad63c5ef9fd79f03d58a9e52d0d1777f21f75e36992755225a86bd16c0c7e/1e1234d616cd0680b91ad4f81ed260d4bb0331387998748b49fff88eda327d6b.jpg"
    }
  ]
}