Basic Types → Stacked Carousels

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 initMulti(){


  var galleryTags = ["leatherjacket_gallery", "sweater_gallery","boot_gallery", "partyskirt_gallery"];

  for (var i in galleryTags){

    var opts = {                       //baseline widget opts
      api: {
        total: 9,
        tags: galleryTags[i]           //set the tag for each widget instance
      },
      display: {
        carouselWrap: false,
        ctaPosition: "bottom",
        ctaThemeClass: "underline",
        cols: 3
      }
    };
      var divId = galleryTags[i]       //use the tags as div IDs for convenience

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

      window[galleryTags[i]] = widget; //optional: make widget instance available on window obj
      widget.load();                   //load each widget
    }
}

window.initMulti = initMulti // run this fn on document load