Missouri State University Pattern Library

Rotator

There are no notes for this item.

<div class="rotator">
    <div class="container">
        <button class="arrow left" aria-label="Go to previous slide">
      <svg width="11" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16">
        <path transform="rotate(90 5.75 5.75)" fill-rule="evenodd" d="M14.12 0.786666667L8 6.89333333 1.88 0.786666667 0 2.66666667 8 10.6666667 16 2.66666667z" /></svg>
    </button>
        <button class="arrow right" aria-label="Go to next slide">
      <svg width="11" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16">
        <path transform="rotate(90 5.25 5.25)" fill-rule="evenodd" d="M8 0L0 8 1.88 9.88 8 3.77333333 14.12 9.88 16 8z" /></svg>
    </button>
        <div class="counter"><span class="numbers counter-index">1</span>out of<span class="numbers counter-total">3</span></div>
    </div>
</div>
 
<div class="rotator">
  <div class="container">
    <button class="arrow left" aria-label="Go to previous slide">
      <svg width="11" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16">
        <path transform="rotate(90 5.75 5.75)" fill-rule="evenodd" d="M14.12 0.786666667L8 6.89333333 1.88 0.786666667 0 2.66666667 8 10.6666667 16 2.66666667z" /></svg>
    </button>
    <button class="arrow right" aria-label="Go to next slide">
      <svg width="11" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16">
        <path transform="rotate(90 5.25 5.25)" fill-rule="evenodd" d="M8 0L0 8 1.88 9.88 8 3.77333333 14.12 9.88 16 8z" /></svg>
    </button>
    <div class="counter"><span class="numbers counter-index">1</span>out of<span class="numbers counter-total">3</span></div>
  </div>
</div>
 
/* No context defined for this component. */