600 West

Slidertrigger: Active 

<button id="" class="SliderTrigger js-slider-trigger is-active " style="" data-target="" data-slider-id="" tabindex="">
  	<span id="" class="" style="">I control a slider, wow look at me</span>

</button>
 
<button id="{{id}}"
        class="SliderTrigger js-slider-trigger {{modifier}} {{class}}"
        style="{{style}}"
        data-target="{{slideindex}}"
        data-slider-id="{{sliderid}}"
        tabindex="{{tabindex}}"
>
  {{> @children}}
</button>
 
{
  "id": null,
  "class": null,
  "modifier": "is-active",
  "style": null,
  "slideindex": null,
  "tabindex": null,
  "sliderid": null,
  "children": [
    {
      "component": "span",
      "context": {
        "text": "I control a slider, wow look at me"
      }
    }
  ]
}

SliderTrigger

SlideTrigger is a button component that has a data-target attribute that will control a slider if this element is within of a Slider’s parent. By setting the slideindex attribute, the Slider will navigate a user to that particular slide.

Best Practices

  • slideindex is an index so that means that if you want to target the first slide be sure to put “0”
  • When using this component you can pass a string to data-slider-id that allows you to use the trigger anywhere on the page.
<div class="row">
  <div class="col _span-12">
      <div id="SickSlider" class="Slider js-slider">
        ...
      </div>

      <div class="ArbitraryContainer">
        <button class="SlideTrigger js-slide-trigger" data-slider-id="SickSlider" data-target="1">
          Switch to slide 2
        </button>
      </div>
  </div>
</div>

Accessibility

  • By default SlideTrigger has no inherent focus states, as its a purely functional component. If you would like focus states be sure to use it with already build A11y components, such as 
<button class="SlideTrigger button _link js-slide-trigger" data-target="0">
  Go To Slide 1
</button>