Arrow Navigation Slides

by shanejones

HTML

<div class="slides">
  <section class="active">
    <article class="item i1 active">Homepage Slide</article>
  </section>
  <section>
    <article class="item i2 ">Col 1 - Head Slide</article>
    <article class="item i3">Col 1 - Item 1</article>
    <article class="item i4">Col 1 - Item 2</article>
  </section>
  <section>
    <article class="item i5">Col 2 - Head Slide</article>
    <article class="item i6">Col 2 - Item 1</article>
    <article class="item i7">Col 2 - Item 2</article>
  </section>
</div>

SCSS

body {
  font: {
   size: 16px; 
   family: sans-serif;
  }
}

.slides, .item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slides {
  background: #37474f;
}

.item {
  opacity: 0;
  transition: opacity .25s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  
  
  &.active {
    opacity: 1;
    z-index: 100
  }
}




/* Colours to distinguish slide changes */
.i1 { background-color: #ffcdd2}
.i2 { background-color: #d1c4e9}
.i3 { background-color: #bbdefb}
.i4 { background-color: #b2ebf2}
.i5 { background-color: #c8e6c9}
.i6 { background-color: #f0f4c3}
.i7 { background-color: #ffccbc}

JavaScript

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        slide_move('left');
        break;

        case 38: // up
        slide_move('up');
        break;

        case 39: // right
        slide_move('right');
        break;

        case 40: // down
        slide_move('down');
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});


function slide_move(direction){
	var $ = jQuery;
  
  var current_section = $('section.active').index();
  var total_sections = $('section').length;
  
  var current_item = $('section.active .item.active').index();
  var total_items = $('section.active .item').length;
  
  var next_section, next_item;
  
  if('left' == direction){
  	if(current_section+1 > 1){
    
    	next_section = current_section - 1;
    
      $('section.active .item.active')
      	.removeClass('active')
        .parent()
        .removeClass('active');
      
      $('section')
        .eq(next_section)
        .addClass('active')
        .find('.item:first-of-type')
        .addClass('active');
      
    }
    
  }
  if('right' == direction){
  
  	if(current_section+1 < total_sections){
    
    	next_section = current_section + 1;
    
      $('section.active .item.active')
      	.removeClass('active')
        .parent()
        .removeClass('active');
      
      $('section')
        .eq(next_section)
        .addClass('active')
        .find('.item:first-of-type')
        .addClass('active');
      
    }
    
  }
  
  if('up' == direction){
  
  	if(current_item+1 > 1){
    
    	next_item = current_item - 1;
    
      $('.item.active')
      	.removeClass('active')
      
      $('section.active .item')
        .eq(next_item)
        .addClass('active');
    }
    
  }
  
   if('down' == direction){

  	if(current_item+1 < total_items){
    
    	next_item = current_item + 1;
    
      $('.item.active')
    ...