<div class="slider-wrapper">
  <div class="slider">
    <div class="slide-navigation__squares">
      <div class="squares-wrapper">
        <div class="squares-slider">
           <span class="square"></span>
           <span class="square"></span>
           <span class="square red"></span>
           <span class="square "></span>
           <span class="square"></span>
          </div>
      </div>
      
    </div>
    <div class="slides-container">
      <div class="slide-wrapper">
        <div class="slide" data-order="1">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/photo-1428908728789-d2de25dbd4e2.jpeg" alt="" />
          <div class="slide-content">
            <h1>Discover</h1>
            <h2>The warm heart of Nordic Beauty</h2>
            <div class="slide-txt">
              <p>The Nordic Countries varied landscapes offer wonderful scenery for any journey, no matter by land or sea.  How you choose to travel will depend on where you go.</p>
              <button>Show regions</button>
            </div>
          </div>
         </div>
        <div class="slide" data-order="2">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/todo-banner.jpg" alt="" />
          <div class="slide-content">
            <h1>To do</h1>
            <h2>Close encounters with nature</h2>
            <div class="slide-txt">
              <p>There's never a bad time to visit the Nordic countries! When you should visit will depend on which types of activities or natural phenomena interest you most.</p>
              <button>Activities</button>
            </div>
          </div>
         </div>
        <div class="slide" data-order="3">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/plan-banner_copy.jpg" alt="" />
          <div class="slide-content">
            <h1>Plan</h1>
            <h2>Top attractions in the nordics</h2>
            <div class="slide-txt">
              <p>June, July and August is the best time to travel, this is when you can expect the warmest weather, longest daylight hours and best availability of outdoor activities.</p>
              <button>Reservations</button>
            </div>
          </div>
         </div>
      </div>
    </div>
    <div class="slide-navigation__txt">
      <ul>
        <li><span data-order="1">Discover</span></li>
        <li><span data-order="2">To do</span></li>
        <li><span data-order="3">Plan</span></li>
      </ul>
    </div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,900,800,500,700,600);

*, *::after,*::before{
  box-sizing:border-box;
}

html, body {
  font-size:6px;
  background:#fbfbfb;
  padding:40px 20px;
  font-family: 'Work Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  
  @media (min-width: 860px) {
      font-size:8px;
      padding:30px 50px;
  }

  @media (min-width: 1200px) {
      font-size:10px;
  }
}

.slider-wrapper {
  position:relative;
  max-width: 90rem;
  min-width: 480px;
  background:#fff;
  margin: 0 auto;
  overflow:hidden;
  box-shadow: 0 0 35px 20px #DDE5EE;
  .slider{
    position:relative;
    height: 65rem;
    padding: 5rem 0;
    &::after {
      content: "";
      display: table;
      clear: both;
    }
    .slide-wrapper {
      position:relative;
      display:block;
      width:100%;
        height:100%;
    }
  }
  
  .slide-navigation__squares, .slide-navigation__txt {
    width:10%;
    position:relative;
    float:left;
     overflow:hidden; 
    
    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }
  
  .slide-navigation__txt {
    display:block;
    height:100%;
    &::after {
      content: "";
      display: table;
      clear: both;
    }
    
    ul {
      margin:0;
      list-style:none;
      padding:0;
      position:absolute;  
      display:table-cell;
      width: 30rem;
      transform:rotate(90deg);
      transform-origin:0;
      margin-left:calc(50% - 0.14rem);
      &::after {
        content: "";
        display: table;
        clear: both;
      }
    }
    li {
      text-transform:uppercase;
      letter-spacing:0.2rem;
      margin: 0 1.2rem;
      position:relative;
      float:left;
      font-size:1.2rem;
      font-weight:600;
      color:#A1A5B8;
      span {
        cursor:pointer;
        transition: all 0.5s ease;
        display:block;
        &.active{
          transform: scale(1.1, 1.1);
          color: #E34D67;
        }
      }
    }
    
  }
  
  .slide-navigation__squares{
     display:block;
     height:100%;
    .squares-wrapper{
      position:absolute;
      margin-left: calc(50% - 0.4rem);
      bottom: 5rem;
      height: 4.6rem;
      overflow:hidden;
    }
    .squares-slider{
      position:relative;
      display:block;
      margin-top:-2.5rem;
      transform:translateY(-2.5rem);
    }
    
    .square{
      width: 0.6rem;
      height:0.6rem;
      display:block;
      margin:1.3rem 0;
      background:#A1A5B8;
      &.red{
        background: #E34D67;
      }
    }
    
  }
  
  .slides-container {
    position:relative;
    width:80%;
    float:left;
    height:100%;
  }
  
  .slide {
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    z-index:1;
    
    img {
      max-width:100%;
      display:block;
      height:100%;
      object-fit:cover;
    }
    .slide-content{
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      padding: 5rem 5.8rem;
      overflow:hidden;
      h1 {
        text-transform:uppercase;
        color:white;
        font-weight:900;
        font-size:10rem;
        text-align:center;
        margin:0;
        opacity:0.6;
        position:relative;
      }
      h2 {
        color:#E34D67;
        font-size:4.8rem;
        max-width:80%;
        margin:0;
        margin-top:-6rem;
        font-weight:900;
        line-height:1;
        position:relative;
        
      }
    }
    .slide-txt{
      position:relative;
      display:block;
      width:100;
      margin-top:6rem;
      &::after {
        content: "";
        display: table;
        clear: both;
      }
      p {
        margin:0;
        max-width:55%;
        color:#666666;
        font-size:1.2rem;
        line-height:1.4;
        float:left;
      }
      button {
        display:block;
        float:right;
        width:18rem;
        text-align:center;
        background:transparent;
        background-color:transparent;
        border:0.28rem solid #E34D67;
        text-transform:uppercase;
        padding:0.8rem 0.5rem;
        font-size:1.5rem;
        color: #E34D67;
        font-weight:600;
        letter-spacing:0.2rem;
        outline:none;
        overflow:hidden;
      }
    }
  }
}
View Compiled
/*

Inspired by the work of the guys at Tubik Studio.
Dribble: https://dribbble.com/Tubik.
https://dribbble.com/shots/2710181-Tubik-Studio-Ice.

*/


var initialSlide = $('.slides-container [data-order="1"]');
var initalSelected = $('.slide-navigation__txt [data-order="1"]');
var mq_medium = window.matchMedia( '(min-width: 860px)' );
var mq_big = window.matchMedia( '(min-width: 1200px)' );


function activate_slide(order){
    
  var unactiveSlide = $('.slide.active');
  var activeSlide = $('.slides-container [data-order="'+order+'"]');
  
  if( !(activeSlide.hasClass('active')) ){
      slide_in(activeSlide);
      slide_out(unactiveSlide);
  }
}

function slide_in(slide) {
  
  var _this = slide;
  
  animation_in(slide);
  _this.addClass('active');
  TweenMax.to(_this, 1, {autoAlpha:1}, '-=1');
  
}

function slide_out(slide){
  
  var _this = slide;
  
  _this.css( 'z-index', '2' );
  _this.removeClass('active');
  TweenMax.to(_this, 1, {autoAlpha:0, onComplete: removeZ});
  
  function removeZ(){
    _this.css( 'z-index', '1' );
  }  
  
  animation_out(slide);
}

function animation_in(slide){
  
  var title = slide.find('h1');
  var subtitle = $(slide).find('h2');
  var text = $(slide).find('p');
  var button = $(slide).find('button');
  var image = $(slide).find('img');
  
  TweenMax.fromTo(title, 0.6,{autoAlpha:0, x:100}, {autoAlpha:0.6, x:0, ease: Power2.easeOut});
  TweenMax.fromTo(subtitle, 0.5,{autoAlpha:0, x:-200}, {autoAlpha:1, x:0, ease: Power2.easeOut},'-0.1');
  TweenMax.fromTo(text, 0.8,{autoAlpha:0, x:50}, {autoAlpha:1, x:0, ease: Power2.easeOut});
  TweenMax.fromTo(button, 0.5,{autoAlpha:0 }, {autoAlpha:1});
  TweenMax.to(image, 0, {autoAlpha:1,scale:1});
}

function animation_out(slide){
  
  var title = slide.find('h1');
  var subtitle = $(slide).find('h2');
  var text = $(slide).find('p');
  var button = $(slide).find('button');
  var image = $(slide).find('img');
  
  TweenMax.to(title, 0.6, {autoAlpha:0, x:0});
  TweenMax.to(subtitle, 0.5, {autoAlpha:0, x:200});
  TweenMax.to(text, 0.5,{autoAlpha:0});
  TweenMax.to(button, 0.5,{autoAlpha:0});
  TweenMax.to(image, 1, {scale:1.1});
  
}

$('.slide-navigation__txt span').on('click', function(){
  
  var _this = $(this);
  var order = _this.data('order');
  var spans = $('.slide-navigation__txt span');
  var current = $('.active').data('order');
  
  spans.removeClass('active');
  _this.addClass('active');
  activate_slide(order); 
  stagger_squares(order, current);
});

function stagger_squares(order, current) {
  var mq = 0.7;
  var moveY;
  var squares = $('.slide-navigation__squares .square');
  var staggerTime = -0.12;
  
  if( order < current ) {
    staggerTime = staggerTime * -1; 
  }
  
  if( mq_medium.matches) { mq = 1 }
  if( mq_big.matches) { mq = 1.3 }
  
    
  
  moveY = (order-1) * (15 * mq );
  TweenMax.staggerTo(squares, 0.1, {y: moveY}, staggerTime);
  
}



$(document).ready(function() {
  
  initialSlide.addClass('active');
  initalSelected.addClass('active');
  TweenMax.to(initialSlide, 0.5, {autoAlpha:1});
  
});




External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js