Hero Slideshow Information
The hero slideshow is a difficult element to incorporate, but it can be very rewarding. Unlike basic hero images, hero slideshow images cannot be styled to fit the viewport independent of the container. This means that hero slideshow images might be fit into an aspect ratio around 1 to 1 (320px by 300px) on mobile and an aspect ratio of almost 4 to 1 (1900px by 500px) on a large screen. All images used should have high enough resolution to display well on larger screens. However, larger images can hurt mobile performance, so know your audience or consider lazy load solutions. Images should also have a landscape orientation to avoid as much distortion as possible. Natural aspect ratios around 2 to 1 seem to work well. The images above are 1024px by 500px. It is also important to add the .slideshow class to the #hero element to avoid a crimson bar of padding beneath the slideshow.
<div id="hero" class="slideshow">
<div class="carousel slide" id="hero-slider" data-ride="carousel">
<!-- indicators -->
<ol class="carousel-indicators">
<li data-target="#hero-slider" data-slide-to="0" class="active"></li>
<li data-target="#hero-slider" data-slide-to="1"></li>
<li data-target="#hero-slider" data-slide-to="2"></li>
<li data-target="#hero-slider" data-slide-to="3"></li>
</ol>
<!-- slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/hero/organs.jpg" alt="Organ Mountains" />
<div class="carousel-caption">
<h2>Explore the Region</h2>
<p>The Organ Mountains Desert Peaks National Monument’s 496,000 acres surround Las Cruces. Our nation’s newest protected area features recreational opportunities like strolling through desert nature trails and the chance to encounter petroglyph and archeological sites. </p>
<p><a class="btn btn-lg btn-primary btn-primary-trans" href="#" role="button">Learn more about the Organ Mountains</a></p>
</div>
</div>
<div class="item">
<img src="images/hero/white-sands.jpg" alt="White Sands" />
<div class="carousel-caption">
<h2>Explore the Region</h2>
<p>Roughly 45 minutes east of Las Cruces, White Sands National Monument protects the world’s largest gypsum dune-field, and the unique plants and animals that survive in this other-worldly place.</p>
<p><a class="btn btn-lg btn-primary btn-primary-trans" href="#" role="button">Learn more about White Sands</a></p>
</div>
</div>
<div class="item">
<img src="images/hero/west-mesa.jpg" alt="West Mesa" class="stretch" />
<div class="carousel-caption">
<h2>Explore the Region</h2>
<p>Located south of Las Cruces, Mesilla allows visitors to see what an 1800’s border town looked like. Only 150 years ago it was the major stop for those traveling between San Antonio, TX and San Diego, CA.</p>
<p><a class="btn btn-lg btn-primary btn-primary-trans" href="#" role="button">Learn more about Mesilla, NM</a></p>
</div>
</div>
<div class="item">
<img src="images/hero/oldmesilla.jpg" alt="Old Mesilla" />
<div class="carousel-caption">
<h2>Explore the Region</h2>
<p>There are countless ways to enjoy our 350 days of blue skies and warm sunshine.</p>
<p><a class="btn btn-lg btn-primary btn-primary-trans" href="#" role="button">Explore Las Cruces Attractions</a></p>
</div>
</div>
</div>
<!-- controls -->
<a class="left carousel-control" href="#hero-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#hero-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
No Stretch Slideshow
The slideshow is limited to a maximum height of 500px. Images are scaled to fit the container in both width and height at this point, so images with lower width aspect ratios will be stretched to fit. If you would prefer to protect your images from stretching, you can add the class .no-stretch to the #hero element. This will cause images to still fill the screen horizontally, but they will now overflow the container vertically, hiding the bottom portion of the scaled image. This should not affect small to medium viewports, but will have a marked affect on any viewport wider than the unaltered images.
Make this hero slideshow .no-stretch Remove .no-stretch class
No Squeeze Slideshow
The hero slideshow retains a height of 300px on slimmer viewports. As images are scaled to fit this, they are squeezed into slimmer aspect ratios which can cause unwanted distortion. This is to protect text that may be in the slideshow from overflowing the container and causing text to be hidden from users with smaller viewports. However, in cases where there is no text in the hero, or in cases where you are confident that the text will not overflow, you may add the .no-squeeze class to allow the slideshow to maintain image aspect ratios at lower widths. This should not affect medium to large viewports, but will have a marked affect on viewports narrower than 768px.
Make this hero slideshow .no-squeeze Remove .no-squeeze class
Less Clutter
The indicators, controls, and .carousel-captions are all optional. Keep all of them to give users more control and more information, or leave some out for a streamlined look that focuses on the images.
Take out the indicators Restore the indicators