<div class="home">
  <div class="nav-menu">
    <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
  </div>

  <div class="nav-container">
    <div class="nav-header">
      <span></span>
      <div class="close-button">CLOSE
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      </div>
    </div>
    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li class="dropdown-container"><a href="#">Services<span class="caret"></span></a>
       
        <ul class="dropdown-nav">
          <li><a href="#">Topic Example 1</a></li>
          <li><a href="#">Topic Example 2</a></li>
          <li><a href="#">Topic Example 3</a></li>
        </ul>

      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <div class="parallax-slider">
    <div class="slider-wrapper">
      <div class="slide slide1 slide-active">
        <div class="content">
          <div class="container">
            <div class="col-md-6 caption">
              <h1>Lorem ipsum dolor sit</h1>
              <p>Curabitur blandit felis massa, et dapibus mi pretium nec.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="slide slide2">
        <div class="content">
          <div class="container">

            <div class="col-md-6 caption">
              <h1>Lorem ipsum dolor sit</h1>
              <p>Curabitur blandit felis massa, et dapibus mi pretium nec.</p>

            </div>
          </div>
        </div>
      </div>
      <div class="slide slide3">
        <div class="content">
          <div class="container">
            <div class="col-md-6 caption">
              <h1>Lorem ipsum dolor sit</h1>
              <p>Curabitur blandit felis massa, et dapibus mi pretium nec.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="slide-indicator">
      <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-top:40px">
        <p>Vestibulum quis ex fermentum, venenatis dui quis, elementum orci. Proin eget elit neque. In nunc lectus, pulvinar nec scelerisque eget, ornare vel tellus. Nulla tristique nisi lacus, quis finibus lorem pretium a. Nullam consectetur est arcu, rhoncus
          laoreet velit tristique ac. Quisque feugiat sed lectus in eleifend. Pellentesque ac sem vehicula, mattis quam nec, finibus est. Morbi sollicitudin rutrum consequat. Donec feugiat lectus enim, pretium rutrum orci dictum vitae.</p>
      </div>
    </div>
  </div>
</div>
body {
  font-family: 'Poppins', sans-serif;
  position: relative;
}

.nav-menu {
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 2;
  cursor: pointer;
  span {
    font-size: 30px;
    color: #fff;
  }
}

.nav-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  z-index: 9998
}

.nav-container {
  position: fixed;
  z-index: 999;
  background: #fff;
  width: 320px;
  height: 100%;
  right: -100%;
}

.close-button {
  float: right;
  padding: 20px;
  cursor: pointer;
  vertical-align: text-bottom;
  span {
    transform: translatey(1px);
  }
}

.navigation {
  padding: 0;
  list-style-type: none;
  a {
    display: inline-block;
    width: 100%;
    padding: 12px 20px;
    color: #202121;
    font-weight: bold;
    font-size: 18px;
    transition: 200ms;
  }
  a:not(last-child) {
    border-bottom: 1px solid #e6eaea;
  }
}

.navigation a:hover,
.navigation a:focus {
  text-decoration: none;
  color: rgba(241, 104, 118, 1);
}

.dropdown-container {
  position: relative;
  .caret {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 6px dashed;
    border-top: 4px solid\9;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    transition: 300ms;
    color: rgba(241, 104, 118, 1);
  }
}

.caret.open {
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.dropdown-nav {
  display: none;
  padding-left: 20px;
  li {
    list-style-type: none;
  }
  a {
    font-weight: 400;
  }
}

.parallax-slider {
  position: relative;
}

.slider-wrapper {
  white-space: nowrap;
  overflow: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.slide {
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  display: inline-block;
  width: 100%;
  height: 450px;
  flex-shrink: 0;
  transition: 0.9s ease-in-out transform;
  backface-visibility: hidden;
}

.slide-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translatex(-50%);
  ol {
    display: inline-block;
  }
  li {
    display: inline-block;
    height: 20px;
    width: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s ease-in-out;
  }
}

.slide-indicator li:hover {
  background: rgba(241, 104, 118, 1);
}

.slide-indicator li.active {
  background: rgba(241, 104, 118, 1);
}

.slide::before {
  content: '';
  display: inline-block;
  height: 50%;
}

.content {
  display: inline-block;
  width: 100%;
  max-height: 100%;
  vertical-align: middle;
  white-space: normal;
  color: #fff;
  transform: translate(-5px);
}

.caption {
  padding: 20px;
  transition: 0.4s;
  transition-delay: 0.8s;
  opacity: 0;
  transform: translatey(200%);
  h1 {
    font-size: 60px;
    font-weight: 700;
  }
}

.slide-active .caption {
  transform: translatey(0);
  opacity: 1;
}

.home {
  height: 1000px;
  position: relative;
}

.slide1 {
  background: url("https://livedemo00.template-help.com/landing_61143/images/slide-03-1920x1000.jpg") top center;
}

.slide2 {
  background: url("https://livedemo00.template-help.com/landing_61143/images/slide-01-1920x1000.jpg") top center;
}

.slide3 {
  background: url("https://livedemo00.template-help.com/landing_61143/images/slide-02-1920x1000.jpg") top center;
}
View Compiled
$(document).ready(function() {
  
  var slideStart;

  function startSlide() {
    slideStart = setInterval(slideShow, 20000);
  };
  function slideShow() {

    var slideCurrent = $(".slide-active");
    var slideNext = slideCurrent.next();
    var dotCurrent = $("li.active");
    var dotNext = dotCurrent.next();

    if (slideNext.length == 0) {
      slideNext = $(".slide").first();
      dotNext = $(".slide-indicator li").first();
    }

    var slideIndex = slideNext.index();

    $('.slide').css({
      'transform': 'translate(-' + (slideIndex) * 100 + '%)'
    });

    $('.slide').removeClass('slide-active');
    slideNext.addClass('slide-active');

    var captionNext = slideNext.find(".caption");

    $('.slide-indicator li').removeClass('active');
    dotNext.addClass('active');
    
    

  };
  function parallaxX() {
    var scrollTop = window.pageYOffset

    $(window).on("scroll resize", function() {
      scrollTop = window.pageYOffset;
    });

    $(".slide").each(function() {
      var parallaxImage = $(this);
      var parallaxOffset = parallaxImage.offset().top;
      var yPos;
      var coords;

      $(window).on("scroll resize", function() {
        yPos = -(parallaxOffset - scrollTop) / 2;
        coords = '50% ' + yPos + 'px';

        parallaxImage.css({
          backgroundPosition: coords
        });
      });
    });
  };
  function siteNav() {

    $(".nav-menu").on("click", function() {
      $("body").animate({
        'right': '320'
      });
      $(".nav-container").animate({
        'right': '0'
      });
      $("<div class=\"nav-wrapper\"></div>").appendTo("body");
    });
    
    $(".close-button").on("click", buttonClose);
    $("body").on("click", '.nav-wrapper', buttonClose);
    
    function buttonClose() {
      $(".nav-wrapper").remove();
      $(".caret").removeClass("open");
      $(".dropdown-nav").slideUp();
      $("body").animate({
        'right': '0'
      });
      $(".nav-container").animate({
        'right': '-100%'
      });
    }
    
    $(".dropdown-container a").on("click", function(){
      $(this).children(".caret").toggleClass("open");
      $(this).next(".dropdown-nav").slideToggle(300);
    });
    
  };

  $('.slide-indicator li').on("click", function() {

    clearInterval(slideStart);
    var goToSlide = $(this).index();

    $('.slide-indicator li').removeClass('active');
    $('.slide').removeClass('slide-active');
    $('.slide').eq(goToSlide).addClass('slide-active');
    $(this).addClass('active');

    $('.slide').css({
      'transform': 'translate(-' + (goToSlide) * 100 + '%)'
    });
    startSlide();
  });

  startSlide();
  parallaxX();
  siteNav();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js