Hero Slider

Go to Source
hero slider

A full-width, responsive and easy to customize slideshow.

It is a common approach to fill in the intro section of a website with a slideshow: you’re trying to show the users as much as you can above the fold, yet you want to deliver this information in an organized and clean way.  Therefore we built for you a ready-to-use jQuery slider, with some built in options like video/image backgrounds and different text alignments. In an attempt to increase user engagement, we replaced the “navigation arrows” with buttons. The difference is: buttons have a title, a hint about what kind of content to expect. Arrows just tell users “you can switch slide”.

Assets:

Creating the structure

The HTML is structured in 2 main elements: an unordered list (ul.cd-hero-slider) containing the slides, and a div.cd-slider-nav, containing the slider navigation and the span.cd-marker (used to create the marker for the selected item in the navigation).

<section class="cd-hero">
	<ul class="cd-hero-slider">
		<li class="selected">
			<div class="cd-full-width">
				<h2><!-- title here  --></h2>
				<p><!-- description here --></p>
				<a href="#0" class="cd-btn"><!-- btn text here --></a>
			</div> <!-- .cd-full-width -->
		</li>

		<!-- othe slides here -->

	</ul> <!-- .cd-hero-slider -->

	<div class="cd-slider-nav">
		<nav>
			<span class="cd-marker item-1"></span>
			
			<ul>
				<li class="selected"><a href="#0">Intro</a></li>
				<li><a href="#0">Tech 1</a></li>
				<!-- other navigation items here -->
			</ul>
		</nav> 
	</div> <!-- .cd-slider-nav -->
</section> <!-- .cd-hero -->

Adding style

The slider structure is pretty straightforward: all the slides are translated to the right, outside the viewport (translateX(100%)); the .selected class is added to the visible slide to move it back into the viewport (translateX(0)), while the .move-left class is used to translate a slide to the left (translateX(-100%)).

To achieve the smooth animation, we used CSS3 Transitions applied to the .selected and the .is-moving elements: when a new slide is selected, the .is-moving class is assigned to the slide moving outside the viewport, while the .selected class is assigned to the selected slide.

.cd-hero-slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
}
.cd-hero-slider li.selected {
  /* this is the visible slide */
  position: relative;
  transform: translateX(0);
}
.cd-hero-slider li.move-left {
  /* slide hidden on the left */
  transform: translateX(-100%);
}
.cd-hero-slider li.is-moving, .cd-hero-slider li.selected {
  /* the is-moving class is assigned to the slide which is moving outside the viewport */
  transition: transform 0.5s;
}

About the single slide animation: on big devices (viewport width more than 768px), we decided to spice up the entrance effect animating the single slide elements (.cd-half-width and .cd-full-width), changing their opacity and transform properties.

The .from-left and .from-right classes are used to detect if the .selected slide is entering the viewport from the left or from the right, in order to trigger a different animation according to the entrance direction. For this effect to properly work, we used a different animation-delay value for each animated element.

For the .cd-half-width elements, for example:

@media only screen and (min-width: 768px) {
  .cd-hero-slider .cd-half-width {
    opacity: 0;
    transform: translateX(40px);
  }
  .cd-hero-slider .move-left .cd-half-width {
    transform: translateX(-40px);
  }
  .cd-hero-slider .selected .cd-half-width {
    /* this is the visible slide */
    opacity: 1;
    transform: translateX(0);
  }
  .cd-hero-slider .is-moving .cd-half-width {
    /* this is the slide moving outside the viewport 
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
    transition: opacity 0s 0.5s, transform 0s 0.5s;
  }
  .cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
  .cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
    /* this is the selected slide - different animation if it's entering from left or right */
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
  }
  .cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
  .cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
    /* this is the selected slide - different animation if it's entering from left or right */
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
  }
}

Events handling

The video used as background for one of the slides is not inserted directly into the HTML but loaded only if the device width is bigger than 768px; this way the video won’t be loaded on mobile devices. The data-video of the selected slide is used to retrieve the video url. You may consider doing the same for the <img> elements inside the .cd-img-container (which is hidden on mobile devices).

Besides, we used jQuery to implement the slideshow functionality: when user clicks one of the list items of the .cd-slider-nav tab, we detect the position of the selected item  (using the index() function) and update the slider (using the nextSlide() or prevSlide() functions according to this position) and the span.cd-marker position.

$('.cd-slider-nav li').on('click', function(event){
	event.preventDefault();
	var selectedItem = $(this);
	if(!selectedItem.hasClass('selected')) {
		// if it's not already selected
		var selectedPosition = selectedItem.index(),
			activePosition = $('.cd-hero-slider .selected').index();
		if( activePosition < selectedPosition) {
			nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
		} else {
			prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
		}
		
		updateNavigationMarker(selectedPosition+1);
	}
});

Go to Source