Old Carousel vs. New Slideshow

Carousel Old

• Used the flexslider javascript plugin (and jQuery)
• Automatically rotates
• Responsive
• Indicates slide position with dots under carousel
• Not dark-mode ready
• Not the best in terms of accessibility

Code

<div class="flexslider">
    <ul class="slides">
        <li>
            <figure>
                <img alt="Cheerleaders posing with flexed arms" src="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselCheerleaders.jpg">
                <figcaption>
                    The Husker Spirit Squad showed their tough side as they posed for photos by spectators Sunday afternoon. 2010 Big Red Road Show at Omaha Qwest Center on February 8, 2010.
                     <span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img alt="Room full of graduating students in academic regalia; focused on a decorated mortar board with the message &quot;Thank you Mom Dad I&heart;U" src="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselGraduation.jpg">
                <figcaption>
                    Nina Lorincz of Omaha made her mortar board into a special message for her parents Saturday. December 2009 Undergraduate Commencement in Bob Devaney Sports Center.
                     <span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img alt="A fully bundled up person outside on campus in a snowshorm with Hamilton and Avery Halls in the backgrond" src="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselSnow.jpg">
                <figcaption>
                    A December snowstorm caused the University to close at noon on December 8, 2009.
                     <span style="font-size:0.6em;font-style:italic">Photo by Greg Nathan / University Communications</span>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img alt="Football players tackling during a game at Memorial Stadium" src="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselFootball.jpg">
                <figcaption>
                    Ndamukong Suh and Larry Asante sandwich Kansas State quarterback Grant Gregory. University of Nebraska–Lincoln vs. Kansas State Wildcats football.
                     <span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span>
                </figcaption>
            </figure>
        </li>
    </ul>
</div>
<script>WDN.initializePlugin('carousel');</script>

Slideshow New

• Uses vanilla javascript
• User advances slides manually
• Responsive
• Dark mode ready
• Optimized for accessibility (with no extra code required on your part)

Code

<div class="dcf-slideshow">
  <ul>
    <li>
      <figure>
        <div class="dcf-ratio dcf-ratio-4x3 dcf-ratio-16x9@md">
          <img class="dcf-d-block dcf-ratio-child dcf-obj-fit-cover" src="https://wdn.unl.edu/images/documentation/dcf-bands-basketball-crowd.jpg" alt="Placeholder image">
        </div>
        <figcaption>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <small class="dcf-txt-xs dcf-txt-nowrap">Illustration by Jane Doe</small></figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <div class="dcf-ratio dcf-ratio-4x3 dcf-ratio-16x9@md">
          <img class="dcf-d-block dcf-ratio-child dcf-obj-fit-cover" src="https://wdn.unl.edu/images/documentation/2015-first-fb-game-wooooo.jpg" alt="Placeholder image">
        </div>
        <figcaption>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <small class="dcf-txt-xs dcf-txt-nowrap">Illustration by Jane Doe</small></figcaption>
      </figure>
    </li>
    <li>
      <div class="dcf-ratio dcf-ratio-4x3 dcf-ratio-16x9@md">
        <img class="dcf-d-block dcf-ratio-child dcf-obj-fit-cover" src="https://wdn.unl.edu/images/documentation/dcf-bands-basketball-halftime.jpg" alt="Placeholder image">
      </div>
    </li>
  </ul>
</div>
<script>
  window.addEventListener('inlineJSReady', function() {
    WDN.initializePlugin('slideshows');
  }, false);
</script>

Make a New Slideshow