<div class="modal">
  <div class="carousel">
    <div class="slide-container">

      <!--  Slider  -->

      <div class="slide">
        <div class="visual-content-container">
          <img src="https://tscweb-uxtest.azurewebsites.net/HostedAssets/scrolling-capture-16-9.gif" alt="" />              
        </div>
        <div class="helper-content-container">
          <div class="helper-content">
            <h2 class="slide-title">Slide One Title</h2>
            Helper text content.<br>
            Two Lines.
          </div>
        </div>
      </div>   

      <div class="slide">
        <div class="visual-content-container">
          <img src="https://tscweb-uxtest.azurewebsites.net/HostedAssets/scrolling-capture-16-9.gif" alt="" />              
        </div>
        <div class="helper-content-container">
          <div class="helper-content">
            <h2 class="slide-title">Slide Two Title</h2>
            Helper text content.<br>
          </div>
        </div>
      </div>   

      <div class="slide">
        <div class="visual-content-container">
          <img src="https://tscweb-uxtest.azurewebsites.net/HostedAssets/scrolling-capture-16-9.gif" alt="" />              
        </div>
        <div class="helper-content-container">
          <div class="helper-content">
            <h2 class="slide-title">Slide Three Title</h2>
            Helper text content.<br>
            Two Lines.
          </div>
        </div>
      </div>         

    </div>

    <div class="controls">
      <button class="button button-nav previous" title="Previous Slide">Back</button>
      <div class="dynamic-toggles"></div>
      <button class="button button-nav button-primary next" title="Next Slide">Next</button>
      <button class="button primary button-primary complete" title="Got It!">Got it!</button>

    </div>
  </div>

</div>
// colors
$color-page-bg: #29ABE2;
$color-white: #fff;
$color-toggle-default: #CDD7E0;
$color-toggle-hover: #E0E8F1;
$color-button: #F0F6FC;
$color-highlight: #4C89CF;
$color-text-dark: #546976;

// sizes
$visual-width: 640px;
$visual-height:360px;
$helper-height: 100px;

// typography
$font-stack-primary: 'Proxima Nova', sans-serif;

body{
  background:$color-page-bg;
  font: 16px/1.4 $font-stack-primary;
  letter-spacing:.03em;
  color: $color-text-dark;
}

.modal{
  background:#fff;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

//Carousel stuff

@mixin background-hover($background-color, $intensity){
  background:$background-color;
  &:hover,&:focus{
    background: lighten($background-color, $intensity);
  }
  &:active{
    background: darken($background-color, $intensity);
  }
}

.button{
  @include background-hover($color-button, 1%);
  width:100px;
  height:28px;
  border-radius:3px;
  display:inline-block;
  cursor:pointer;
  border:0;
  box-shadow: 0 1px 10px rgba(0,0,0,.3);
  font-family: $font-stack-primary;
  font-size: 14px;
  outline:none;
  &.button-primary{
    @include background-hover($color-highlight, 10%);
    color:$color-white;
  }
  &.button-nav{
    display:none;
  }
  &.previous{
    float:left;
  }
  &.next{
    float:right;
  }
  &.complete{
    float:right;
    display:none;
  }
  &:disabled{
    opacity:.5;
    cursor:initial;
    pointer-events:none;
  }
}

.carousel{
  width:$visual-width;
  margin:auto;
}

.controls{
  text-align:center;
  padding:20px;
  white-space:nowrap;
  &.on-last-slide{
    .button-nav.next{
      display:none;
    }
    .complete{
      display:inline-block;
    }
  }

  &.has-nav{
    .button-nav{
      display:inline-block;
    }
  }

  .dynamic-toggles{
    display:inline-block;
  }

  .toggle{
    margin:0 .25rem;
    display:inline-block;
    width:1rem;
    height:1rem;
    border:0;
    background:#fff;
    border-radius:100%;
    cursor:pointer;
    outline:none;
    background:$color-toggle-default;
    &:hover, &:focus{
      background:$color-toggle-hover;
    }
    &.active{
      background:$color-highlight;
    }
  }
}

.slide-container{
  height: $visual-height + $helper-height;
}

.slide{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
  background:$color-white;
  opacity:0;
  transition: opacity .3s ease; 
  height:$visual-height;
  &.active{
    opacity:1;
    z-index:1;
  }
}

.visual-content-container{
  height:$visual-height;
  width:$visual-width;
  img, video{
    max-width:100%;
    max-height:100%;
  }  
}

.helper-content-container{
  display:table;
  width:100%;
  position:absolute;
  right:0;
  top:$visual-height;  
  left:0;
  height: $helper-height;
  box-sizing:border-box;
  padding:0 20px;
}

.helper-content{
  display:table-cell;
  vertical-align:middle;
  font-size:1rem;
}

.slide-title{
  font-size:1.2rem;
  font-weight:600;
}

View Compiled
var slides = document.getElementsByClassName('slide');
var toggles = document.getElementsByClassName('toggle');
var nextButton = document.getElementsByClassName('next')[0];
var previousButton = document.getElementsByClassName('previous')[0];
var completeButton = document.getElementsByClassName('complete')[0];
var controls = document.getElementsByClassName('controls')[0];
var dynamicControls = document.getElementsByClassName('dynamic-toggles')[0];
var activeClass = 'active';
var activeSlideIndex = 0;

function createToggle(label){
  var button = document.createElement('button');
  button.classList.add('toggle');
  button.title = 'Slide ' + (label + 1);
  button.setAttribute('data-id', label);
  button.addEventListener('click', function(e){
    activeSlideIndex = parseInt(e.target.getAttribute('data-id'));
    toggleSlide(activeSlideIndex);  
  });
  dynamicControls.appendChild(button);
};

function initToggles(){
  if(slides.length > 1){
    for (var i = 0; i < slides.length; ++i){
      createToggle(i);
    };
  };
  toggles = document.getElementsByClassName('toggle');  
  slides[0].classList.add(activeClass);
  toggles[0].classList.add(activeClass);
  setCarouselType();
  toggleDisabled();
  toggleLastSlide();
};

function setCarouselType(){
  if(slides.length > 1){
    controls.classList.add('has-nav');
  };
};

function toggleLastSlide(){
  console.log('active slide: ', activeSlideIndex);
  if(activeSlideIndex+1 === slides.length){
    controls.classList.add('on-last-slide');
  } else{
    controls.classList.remove('on-last-slide');
  }
}

function toggleDisabled(){
  (activeSlideIndex === 0) ? previousButton.disabled = true: previousButton.disabled = false;
  (activeSlideIndex === slides.length - 1) ? nextButton.disabled = true: nextButton.disabled = false;
};

function toggleSlide(slideIndex){
  for( var i = 0; i < slides.length; ++i){
    slides[i].classList.remove(activeClass);   
  } 
  slides[slideIndex].classList.add(activeClass);
  for( var i = 0; i < slides.length; ++i){
    toggles[i].classList.remove(activeClass);   
  }   
  toggles[slideIndex].classList.add(activeClass);
  toggleDisabled();
  toggleLastSlide()
};

function fireCompleteEvent(){
  alert('Close modal and mark this item as completed.')
};

// add event listeners

nextButton.addEventListener('click', function(){
  if(activeSlideIndex < slides.length - 1){
    activeSlideIndex = activeSlideIndex + 1;
    toggleSlide(activeSlideIndex);  
  };
});

previousButton.addEventListener('click', function(){
  if(activeSlideIndex > 0){
    activeSlideIndex = activeSlideIndex - 1;
    toggleSlide(activeSlideIndex);  
  };
});

completeButton.addEventListener('click', fireCompleteEvent);

// init controls on load

initToggles();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.