Missouri State University Pattern Library

Photo slider

There are no notes for this item.

<article class="Slides ContentBlock">
    <ul>
        <li class="Slide">
            <div class="blockWrap">
                <div class="Wrap">
                    <div class="WrapInner">
                        <a href="#"><span data-slidepicture data-alt="Photo one"><span data-src="http://picsum.photos/1920/1080?random&#x3D;1" data-height="" data-width=""></span><noscript><img alt="Photo one" src="http://picsum.photos/1920/1080?random&#x3D;1" /></noscript></span></a>
                    </div>
                </div>
            </div>
            <h3 id="slide-1" class="title"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
            <p>Voluptatem repudiandae delectus eveniet, necessitatibus unde aperiam iste beatae assumenda dolorem magnam.</p>
        </li>
        <li class="Slide">
            <div class="blockWrap">
                <div class="Wrap">
                    <div class="WrapInner">
                        <a href="#"><span data-slidepicture data-alt="Photo two"><span data-src="http://picsum.photos/1920/1080?random&#x3D;2" data-height="" data-width=""></span><noscript><img alt="Photo two" src="http://picsum.photos/1920/1080?random&#x3D;2" /></noscript></span></a>
                    </div>
                </div>
            </div>
            <h3 id="slide-2" class="title"><a href="#">Libero eveniet laudantium</a></h3>
            <p>Vero vel ad similique quo excepturi, voluptatum dignissimos temporibus cum officiis adipisci nobis deserunt obcaecati saepe pesciunt.</p>
        </li>
        <li class="Slide">
            <div class="blockWrap">
                <div class="Wrap">
                    <div class="WrapInner">
                        <a href="#"><span data-slidepicture data-alt="Photo three"><span data-src="http://picsum.photos/1920/1080?random&#x3D;3" data-height="" data-width=""></span><noscript><img alt="Photo three" src="http://picsum.photos/1920/1080?random&#x3D;3" /></noscript></span></a>
                    </div>
                </div>
            </div>
            <h3 id="slide-3" class="title"><a href="#">Praesentium quisquam eos sint</a></h3>
            <p>Incidunt laboriosam minus reprehenderit nisi corporis dolorum tenetur ipsam saepe neque consequatur voluptate ut consectetur odit.</p>
        </li>
    </ul>
    <div class="Controls">
        <div>
            <button class="LeftArrow" aria-label="Previous item">
        <span class="content_icon_sprites slideshow_left_arrow"></span>
      </button>
            <button class="RightArrow" aria-label="Next item">
        <span class="content_icon_sprites slideshow_right_arrow"></span>
      </button>
        </div>
    </div>
</article>
<script type="text/javascript">
    missouristate.requireScript("../../scripts/components/photo-slider.js", false);
</script>
 
<article class="Slides ContentBlock">
  <ul>
    {{#each columnContentA}}
      <li class="Slide">
        <div class="blockWrap">
          <div class="Wrap">
            <div class="WrapInner">
              {{#if slideLink}}<a href="{{slideLink}}">{{/if}}<span data-slidepicture data-alt="{{imageAltText}}"><span data-src="{{photo}}" data-height="{{photoHeight}}" data-width="{{photoWidth}}"></span><noscript><img alt="{{imageAltText}}" src="{{photo}}" /></noscript></span>{{#if slideLink}}</a>{{/if}}
            </div>
          </div>
        </div>
        <h3 id="slide-{{pageId}}" class="title">{{#if slideLink}}<a href="{{slideLink}}">{{/if}}{{photoHeading}}{{#if slideLink}}</a>{{/if}}</h3>
        <p>{{photoDescription}}</p>
      </li>
    {{/each}}
  </ul>
  <div class="Controls">
    <div>
      <button class="LeftArrow" aria-label="Previous item">
        <span class="content_icon_sprites slideshow_left_arrow"></span>
      </button>
      <button class="RightArrow" aria-label="Next item">
        <span class="content_icon_sprites slideshow_right_arrow"></span>
      </button>
    </div>
  </div>
</article>
<script type="text/javascript">
  missouristate.requireScript("{{path '/scripts/components/photo-slider.js'}}", false);
</script>
 
{
  "columnContentA": [
    {
      "pageId": 1,
      "photoHeading": "Lorem ipsum dolor sit amet consectetur",
      "photoDescription": "Voluptatem repudiandae delectus eveniet, necessitatibus unde aperiam iste beatae assumenda dolorem magnam.",
      "photo": "http://picsum.photos/1920/1080?random=1",
      "imageAltText": "Photo one",
      "slideLink": "#"
    },
    {
      "pageId": 2,
      "photoHeading": "Libero eveniet laudantium",
      "photoDescription": "Vero vel ad similique quo excepturi, voluptatum dignissimos temporibus cum officiis adipisci nobis deserunt obcaecati saepe pesciunt.",
      "photo": "http://picsum.photos/1920/1080?random=2",
      "imageAltText": "Photo two",
      "slideLink": "#"
    },
    {
      "pageId": 3,
      "photoHeading": "Praesentium quisquam eos sint",
      "photoDescription": "Incidunt laboriosam minus reprehenderit nisi corporis dolorum tenetur ipsam saepe neque consequatur voluptate ut consectetur odit.",
      "photo": "http://picsum.photos/1920/1080?random=3",
      "imageAltText": "Photo three",
      "slideLink": "#"
    }
  ]
}