Use a photo slider block as a gallery for a rotating set of related images.

Best practices

  • If you’re using Flickr already, consider using the Flickr photo slider block.
  • Avoid using a photo slider block as a content carousel as most website visitors will only see the first slide.
  • Avoid overlaying text on images; use captions to provide contextual content.
  • Use to showcase visual portfolio, event photos or other thematic images.
  • Avoid using captions to deliver the page’s main message. Captions should describe the content of the photo in a clear and concise manner.
  • Strive for captions that are 100 characters or less, so that the captions and images are both visible on a mobile device.
  • Crop photos to 700x394.
  • Handle: @photo-slider
  • Preview:
  • Filesystem Path: src/components/02-blocks/media/photo-slider/photo-slider.hbs
<script type="text/javascript">
    missouristate.requireScript("https://missouristate.info/scripts/2013/slideshow/slideshow.js", false);
</script>
<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="https://placehold.it/1920x1080" data-height="" data-width=""></span><noscript><img alt="Photo one" src="https://placehold.it/1920x1080" /></noscript></span></a>
                    </div>
                </div>
            </div>
            <h3 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="https://placehold.it/1920x1080" data-height="" data-width=""></span><noscript><img alt="Photo two" src="https://placehold.it/1920x1080" /></noscript></span></a>
                    </div>
                </div>
            </div>
            <h3 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="https://placehold.it/1920x1080" data-height="" data-width=""></span><noscript><img alt="Photo three" src="https://placehold.it/1920x1080" /></noscript></span></a>
                    </div>
                </div>
            </div>
            <h3 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">
                <span class="content_icon_sprites slideshow_left_arrow"></span>
            </button>
            <button class="RightArrow">
                <span class="content_icon_sprites slideshow_right_arrow"></span>
            </button>
        </div>
    </div>
</article>
<script type="text/javascript">
    missouristate.requireScript("https://missouristate.info/scripts/2013/slideshow/slideshow.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 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">
                <span class="content_icon_sprites slideshow_left_arrow"></span>
            </button>
            <button class="RightArrow">
                <span class="content_icon_sprites slideshow_right_arrow"></span>
            </button>
        </div>
    </div>
</article>
{
  "columnContentA": [
    {
      "photoHeading": "Lorem ipsum dolor sit amet consectetur",
      "photoDescription": "Voluptatem repudiandae delectus eveniet, necessitatibus unde aperiam iste beatae assumenda dolorem magnam.",
      "photo": "https://placehold.it/1920x1080",
      "imageAltText": "Photo one",
      "slideLink": "#"
    },
    {
      "photoHeading": "Libero eveniet laudantium",
      "photoDescription": "Vero vel ad similique quo excepturi, voluptatum dignissimos temporibus cum officiis adipisci nobis deserunt obcaecati saepe pesciunt.",
      "photo": "https://placehold.it/1920x1080",
      "imageAltText": "Photo two",
      "slideLink": "#"
    },
    {
      "photoHeading": "Praesentium quisquam eos sint",
      "photoDescription": "Incidunt laboriosam minus reprehenderit nisi corporis dolorum tenetur ipsam saepe neque consequatur voluptate ut consectetur odit.",
      "photo": "https://placehold.it/1920x1080",
      "imageAltText": "Photo three",
      "slideLink": "#"
    }
  ]
}