How to Use the New WDN Hero Code in a Carousel

Written by: Becky Aiken | IANR Media

The WDN recently released new hero code for the wide images or videos commonly seen at the top of UNL websites. You may want to use this hero code on your website, but can you incorporate it into an image carousel

Yes! Read on to learn how.

1. Start with the Carousel Code

Copy the HTML and Javascript from the WDN Carousel Documentation and paste it into the HTML of your site.

UNLcms WYSIWYG Editor UNLcms HTML Editor
Use the dropdown underneath the WYSIWYG editor to switch to HTML mode.
	
<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>
	

2. Remove the old slide code

Go through and delete the code inside each carousel slide as marked below.

	
<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>
	

You should end up with this:

	
<div class="flexslider">
    <ul class="slides">
        <li>
        </li>
<li> </li>
<li> </li>
<li> </li> </ul> </div> <script>WDN.initializePlugin('carousel');</script>

You'll want to have the same number of <li> and </li> pairs as you will have slides in your carousel, so adjust as needed. In this example, we'll have four slides.

3. Add the new Hero Code

Now copy the HTML for the new hero code from the WDN website.

	
<div class="wdn-band wdn-hero">
    <div class="wdn-hero-text-container">
        <div class="wdn-hero-text">
            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">New Hero for Framework</span> <span class="wdn-hero-impact-line">New WDN Hero</span></h2>
            <a href="http://news.unl.edu/newsrooms/unltoday/" class="wdn-button wdn-button-outline">Learn More</a>
            <a href="http://admissions.unl.edu/why-unl.aspx" class="wdn-button wdn-button-outline">Explore Admissions</a>
        </div>
    </div>       
    <div class="wdn-hero-video">
        <video autoplay loop poster="images/documentation/2015-first-fb-game-wooooo.jpg" aria-hidden="e;true"e;>
            <source src="images/documentation/2015-first-fb-game-fingers-crossed.mp4">
        </video>
    </div>
    <div class="wdn-hero-picture">
        <img src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="Students cheer at the football game">
    </div>
</div>
	

Paste the new code in between the first <li> and </li> pair in your HTML. New code is shown below in green.

	
<div class="flexslider">
    <ul class="slides">
        <li>
		<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">New Hero for Framework</span> <span class="wdn-hero-impact-line">New WDN Hero</span></h2>
		            <a href="http://news.unl.edu/newsrooms/unltoday/" class="wdn-button wdn-button-outline">Learn More</a>
		            <a href="http://admissions.unl.edu/why-unl.aspx" class="wdn-button wdn-button-outline">Explore Admissions</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-video">
		        <video autoplay loop poster="images/documentation/2015-first-fb-game-wooooo.jpg" aria-hidden="e;true"e;>
		            <source src="images/documentation/2015-first-fb-game-fingers-crossed.mp4">
		        </video>
		    </div>
		    <div class="wdn-hero-picture">
		        <img src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="Students cheer at the football game">
		    </div>
		</div>
        </li>
<li> </li>
<li> </li>
<li> </li> </ul> </div> <script>WDN.initializePlugin('carousel');</script>

The new hero code contains code to show both a video and a photo. Delete whichever one you're not using.

	
<div class="flexslider">
    <ul class="slides">
        <li>
		<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">New Hero for Framework</span> <span class="wdn-hero-impact-line">New WDN Hero</span></h2>
		            <a href="http://news.unl.edu/newsrooms/unltoday/" class="wdn-button wdn-button-outline">Learn More</a>
		            <a href="http://admissions.unl.edu/why-unl.aspx" class="wdn-button wdn-button-outline">Explore Admissions</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-video">
		        <video autoplay loop poster="images/documentation/2015-first-fb-game-wooooo.jpg" aria-hidden="e;true"e;>
		            <source src="images/documentation/2015-first-fb-game-fingers-crossed.mp4">
		        </video>
		    </div>
		    <div class="wdn-hero-picture">
		        <img src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="Students cheer at the football game">
		    </div>
		</div>
        </li>
<li> </li>
<li> </li>
<li> </li> </ul> </div> <script>WDN.initializePlugin('carousel');</script>

Now that you have the hero code ready to go in the first slide, copy and paste it into your remaining <li> and </li> pairs.

	
<div class="flexslider">
    <ul class="slides">
        <li>
		<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">New Hero for Framework</span> <span class="wdn-hero-impact-line">New WDN Hero</span></h2>
		            <a href="http://news.unl.edu/newsrooms/unltoday/" class="wdn-button wdn-button-outline">Learn More</a>
		            <a href="http://admissions.unl.edu/why-unl.aspx" class="wdn-button wdn-button-outline">Explore Admissions</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-picture">
		        <img src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="Students cheer at the football game">
		    </div>
		</div>
        </li>
        <li>         
        	<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">New Hero for Framework</span> <span class="wdn-hero-impact-line">New WDN Hero</span></h2>
		            <a href="http://news.unl.edu/newsrooms/unltoday/" class="wdn-button wdn-button-outline">Learn More</a>
		            <a href="http://admissions.unl.edu/why-unl.aspx" class="wdn-button wdn-button-outline">Explore Admissions</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-picture">
		        <img src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="Students cheer at the football game">
		    </div>
		</div>  
        </li>        
        <li>
        	<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">New Hero for Framework</span> <span class="wdn-hero-impact-line">New WDN Hero</span></h2>
		            <a href="http://news.unl.edu/newsrooms/unltoday/" class="wdn-button wdn-button-outline">Learn More</a>
		            <a href="http://admissions.unl.edu/why-unl.aspx" class="wdn-button wdn-button-outline">Explore Admissions</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-picture">
		        <img src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="Students cheer at the football game">
		    </div>
		</div>              
        </li>
        <li>
         	<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">New Hero for Framework</span> <span class="wdn-hero-impact-line">New WDN Hero</span></h2>
		            <a href="http://news.unl.edu/newsrooms/unltoday/" class="wdn-button wdn-button-outline">Learn More</a>
		            <a href="http://admissions.unl.edu/why-unl.aspx" class="wdn-button wdn-button-outline">Explore Admissions</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-picture">
		        <img src="images/documentation/2015-first-fb-game-wooooo.jpg" alt="Students cheer at the football game">
		    </div>
		</div>            
        </li>
    </ul>
</div>
<script>WDN.initializePlugin('carousel');</script>
	

4. Add your own text and images to the carousel

We're almost there! Now that the HTML is set up for each slide, go through each one and update them with the content you want for your site. The following content pieces are available to customize on each slide:

  • Hero Subheading: the small text above the main heading. If you don't want a subheading, just remove the <span class="wdn-hero-initial-line">...</span>
  • Hero Heading: the big text in the hero
  • Call-to-Action Buttons: two buttons that appear beneath the text. You can remove one or both of the buttons by deleting the <a href="..." class="wdn-button wdn-button-outline">...</a>
  • Image (Or Video): the main background visual. Remember to include a descriptive alt tag!
	
<div class="flexslider">
    <ul class="slides">
        <li>
		<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">The First Slide</span> <span class="wdn-hero-impact-line">Slide One</span></h2>
		            <a href="http://ianrmedia.unl.edu" class="wdn-button wdn-button-outline">Button 1</a>
		            <a href="http://ianrmedia.unl.edu/resources" class="wdn-button wdn-button-outline">Button 2</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-picture">
		        <img src="images/resources/kittens-01.jpg" alt="Two adorable kittens surrounded by lilacs">
		    </div>
		</div>
        </li>
        <li>         
        	<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">The Second Slide</span> <span class="wdn-hero-impact-line">Slide Two</span></h2>
		            <a href="http://ianrmedia.unl.edu" class="wdn-button wdn-button-outline">Button 3</a>
		            <a href="http://ianrmedia.unl.edu/resources" class="wdn-button wdn-button-outline">Button 4</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-picture">
				<img src="images/resources/kittens-02.jpg" alt="Tabby kitten relaxing in a beach chair">
		    </div>
		</div>
        </li>        
        <li>
        	<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">The Third Slide</span> <span class="wdn-hero-impact-line">Slide Three</span></h2>
		            <a href="http://ianrmedia.unl.edu" class="wdn-button wdn-button-outline">Button 5</a>
		            <a href="http://ianrmedia.unl.edu/resources" class="wdn-button wdn-button-outline">Button 6</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-picture">
		        <img src="images/resources/kittens-03.jpg" alt="A basket of five tabby kittens sitting in a garden">
		    </div>
		</div>             
        </li>
        <li>
         	<div class="wdn-band wdn-hero">
		    <div class="wdn-hero-text-container">
		        <div class="wdn-hero-text">
		            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">The Fourth Slide</span> <span class="wdn-hero-impact-line">Slide Four</span></h2>
		            <a href="http://ianrmedia.unl.edu" class="wdn-button wdn-button-outline">Button 7</a>
		            <a href="http://ianrmedia.unl.edu/resources" class="wdn-button wdn-button-outline">Button 8</a>
		        </div>
		    </div>       
		    <div class="wdn-hero-picture">
		        <img src="images/resources/kittens-04.jpg" alt="Two concerned looking kittens sitting in a flower pot surrounded by red and pink flowers">
		    </div>
		</div>           
        </li>
    </ul>
</div>
<script>WDN.initializePlugin('carousel');</script>
	

5. CSS Fix

Finally, you will need to add the following CSS to your website in order to prevent black bars from appearing at the bottom of your slider.

	
#maincontent .flexslider .wdn-hero-picture img {
   height: 100%;
}

Drumoll Please...

Looks great! Just remember that if you want the hero carousel to stretch across the full width of your page, you'll need to check the "Remove WDN Inner Wrapper" checkbox and press "Save".

Remove wdn-inner-wrapper class checkbox in UNLcms

Optimize for Mobile

One last thing. If you take a look at the new carousel on your phone, you'll see that the arrows overlap with the text box a bit.

Kitten Carousel as seen on a mobile phone

To correct this, add the following CSS to your site:

	
		@media screen and (max-width: 640px) {
 .flex-direction-nav a {
  top: 25% !important;
 }
}
UNLcms CSS Editor

All Better!

Kitten Carousel with updated CSS