Hero Banner with Slider

To add this slider copy the below code snippet

Login Register Now

AddHTMLHTML

                  
  <div class="slider_with_caption">
      <div id="carousel-landing" class="carousel slide" data-ride="carousel"><!-- Wrapper for slides -->
          <div class="carousel-inner">
              <div class="item active">
                  <img src="https://vepimg.b8cdn.com/uploads/vjfnew/9002/content/files/1676456199slide1-jpg1676456199.jpg" alt="..." />
              </div>
              <div class="item"><img src="https://vepimg.b8cdn.com/uploads/vjfnew/9002/content/files/1676456199slide2-jpg1676456199.jpg" alt="..." /></div>
              <div class="item"><img src="https://vepimg.b8cdn.com/uploads/vjfnew/9002/content/files/1676456199slide3-jpg1676456199.jpg" alt="..." /></div>
          </div>
          <!-- Controls -->
                  <a style="display: block !important;" class="left slider-arrow" href="#carousel-landing" role="button" data-slide="prev">
                      <i class="fa fa-chevron-left"></i>
                  </a>
                  <a style="display: block !important;" class="right slider-arrow" href="#carousel-landing" role="button" data-slide="next">
                      <i class="fa fa-chevron-right"></i>
                  </a>
      </div>
      <div class="slider_content">
          <div class="popup" data-type="bgtrans">
              <div class="row">
                  <div class="col-sm-12">
                  <h1>Annual Virtual Event</h1>
                  <h4 id="date-info"><span class="eventDate"> January 25 -28, 2023</span> <span class="eventTime">9:00 am to 5:00 pm (EST)</span></h4>
                  <div class="two-btns"><a href="#LoginModal" data-toggle="modal" data-type="btn"> <i class="fa fa-lock" aria-hidden="true"></i> Login </a> <a href="/en/registration" data-type="btn"> <i class="fa fa-pencil" aria-hidden="true"></i> Register Now </a></div>
                  </div>
              </div>
          </div>
      </div>
  </div>

AddCSSCSS

                  
  .slider_with_caption {
      position: relative;
  }
  
  .slider_content {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      background-color: rgba(0, 0, 0, .4);
  }
  
  .slider-arrow {
      position: absolute;
      top: 50%;
      z-index: 3;
      color: #FFF;
      font-size: 27px;
  }
  
  .slider-arrow:hover {
      transform: scale(1.3);
      color: #FFF;
  }
  
  .slider-arrow:focus {
      color: #FFF;
  }
  
  .slider-arrow.left {
      left: 5%;
  }
  
  .slider-arrow.right {
      right: 5%;
  }