Missouri State University Pattern Library

Carousel

There are no notes for this item.

<div class="spotlight-carousel" data-spotlightIndex="1" data-totalSlides="2">
    <ul class="container">
        <li class="slide active" data-slideIndex="1">
            <div class="container">
                <div class="crop">
                    <div class="ContentBlock call-to-action">
                        <div class="eyebrow">
                        </div>
                        <h2 class="headline">This is headline for slide one</h2>
                        <p class="description">This is a rather length description for slide one.</p>
                        <div class="link-bar">
                            <ul class="container">
                                <li>
                                    <a href="#" class="button">Lorem ipsum</a>
                                </li>
                            </ul>
                        </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>
            </div>
            <div class="image-container">
                <img class="image" data-src="http://picsum.photos/id/1005/1920/1080" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="">
            </div>
        </li>
        <li class="slide inactive" data-slideIndex="2">
            <div class="container">
                <div class="crop">
                    <div class="ContentBlock call-to-action">
                        <div class="eyebrow">
                        </div>
                        <h2 class="headline">This is the headline for slide two</h2>
                        <p class="description">This is a rather lengthy description for slide two.</p>
                        <div class="link-bar">
                            <ul class="container">
                                <li>
                                    <a href="#" class="button">Lorem ipsum</a>
                                </li>
                            </ul>
                        </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>
            </div>
            <div class="image-container">
                <img class="image" data-src="http://picsum.photos/id/1025/1920/1080" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="">
            </div>
        </li>
    </ul>
</div>
<script src="../../scripts/components/carousel.js" async></script>
 
<div class="spotlight-carousel{{#if expand}} expand{{/if}}" data-spotlightIndex="{{spotlightIndex}}" data-totalSlides="{{totalSlides}}">
  <ul class="container">
    {{#each slide}}
      <li class="slide{{#if @first}} active{{else}} inactive{{/if}}" data-slideIndex="{{slideIndex}}">
        <div class="container">
          <div class="crop">
            {{> @call-to-action cta}}
          </div>
          {{> @rotator}}
        </div>
        <div class="image-container">
          <img class="image" data-src="{{image.src}}" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="{{image.alt}}">
        </div>
      </li>
    {{/each}}
  </ul>
</div>
<script src="{{path '/scripts/components/carousel.js'}}" async></script>
 
{
  "expand": false,
  "spotlightIndex": 1,
  "totalSlides": 2,
  "slide": [
    {
      "slideIndex": 1,
      "cta": {
        "eyebrow": "Slide one",
        "headline": "This is headline for slide one",
        "description": "This is a rather length description for slide one.",
        "linkBar": {
          "link": [
            {
              "text": "Lorem ipsum",
              "url": "#"
            }
          ]
        }
      },
      "image": {
        "src": "http://picsum.photos/id/1005/1920/1080",
        "alt": null
      }
    },
    {
      "slideIndex": 2,
      "cta": {
        "eyebrow": "Slide two",
        "headline": "This is the headline for slide two",
        "description": "This is a rather lengthy description for slide two.",
        "linkBar": {
          "link": [
            {
              "text": "Lorem ipsum",
              "url": "#"
            }
          ]
        }
      },
      "image": {
        "src": "http://picsum.photos/id/1025/1920/1080",
        "alt": null
      }
    }
  ]
}