<section class="slider-parallax-cta">

  <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>
</section>
body {
  font-family: 'Poppins', sans-serif;
  position: relative;
}

.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 !important;
  -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%);
  }
 .slide-indicator ol {
    display: inline-block;
  }
 .slide-indicator 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%);
 }
.caption h1 {
    font-size: 60px;
    font-weight: 700;
  }


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

.slider-parallax-cta {
  height: 1000px;
  position: relative;
}

.slide {background-size: cover;}
.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;
}
$(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
        });
      });
    });
  };

  $('.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();
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css