Examples → Nav Arrow Config

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.

(Note: the border in the above example is on the target div, just to show where it is. It is not rendered by the widget)

Responsive behavior can now be configured with responsive option as seen below

        
var opts = {
        api: {
          total: 6,
          item_number: '389998022',
        },
        display: {
          carouselWrap: false,  // default true

          cols: 3,

          ctaThemeClass: "underline",

          //when this is set AND ...
          ctaPosition: "bottom",

          // ... this is set, the arrows will be aligned near the CTA at the bottom,
          // rather than in the center of the outfits (it will still be centered at
          // desktop and tablet breakpoint sizes
          mobileArrows: true,

          // thin arrows
          thinArrows: true,

          // next arrow text - this is an html string so include <br> for linebreaks
          // this will only be rendered at mobile screen size
          nextLookArrowText: 'Next <br> Outfit',

          // prev arrow text - this is an html string so include <br> for linebreaks
          // this will only be rendered at mobile screen size
          previousLookArrowText: "Previous <br> Outfit",

          // arrow color
          //arrowColor: "red",

          // arrow width
          //arrowWidth: 20,

          // arrow height
          //arrowHeight: 40,

          // arrow stroke width
          //arrowStrokeWidth: 2

        },
      }


      //constructor args:  client name, id of target div, config options
      var styliticsWidget1 = new StyliticsWidget("demo", "target1", opts)

      styliticsWidget1.load()
      //when used at end of body tag.  Use library of your choice to
      //ensure widget loads after target div exists on page
        
        

Note: when using these configs to show CTA at the bottom in conjunction with mobile arrows, AND you show a border on your outer widget container div (the "target"), you will need to account for the CTA on mobile, like so:

          
@media only screen and (max-width: 550px){
  #target1 {
    padding-bottom: 50px;
  }
}