Basic Types → Gallery Widget

Instructions

Require the widget script

        <script src="//widget.stylitics.com/v2/widget.js"></script>
        

Set configuration options and initialize the widget once your target div is on the page.

        
function initGallery(){

  var opts = {
    api: {
      total: 9, // for a non-carousel gallery @ desktop size, set to rows x cols
      tags: 'newarrivals_gallery'
    },
    display: {
      carouselWrap: false,
      cols: 3,
      rows: 3,  // resets to 1 row, with carousel swipe nav, on mobile
      mobileArrows: true
    }
  };


  let tag = divId = "newarrivals_gallery"
  opts.api.tags = tag;             //set the tag for each widget instance

  var widget = new StyliticsWidget("demo", divId, opts);

  widget.load();  // .load takes a callback to be called w/outfits json array
}

window.initGallery = initGallery // call this fn on document load