<div class="homepage-hero-carousel" style="display:none;">
  <div class="homepage-hero-slide">
    <div class="homepage-hero-slide-image" style="background-image:url(https://s3.amazonaws.com/static.northpass.com/J%26J/pexels-andrea-piacquadio-3768131.jpg)">
    </div>
    <div class="homepage-hero-slide-content">
      <div class="homepage-hero-slide-headline">
        Vision Excellence Institute
      </div>
      <div class="homepage-hero-slide-subheadline">
        Powered by Johnson & Johnson Professional Education
      </div>
    </div>
  </div>

  <div class="homepage-hero-slide">
    <div class="homepage-hero-slide-image" style="background-image:url(https://s3.amazonaws.com/static.northpass.com/J%26J/2f537d7b-f756-492b-87e7-a62c2a4ed35c.jpeg)">
    </div>
    <div class="homepage-hero-slide-content">
      <div class="homepage-hero-slide-headline">
        Vision Excellence Institute
      </div>
      <div class="homepage-hero-slide-subheadline">
        Powered by Johnson & Johnson Professional Education
      </div>
    </div>
  </div>

  <div class="homepage-hero-slide">
    <div class="homepage-hero-slide-image" style="background-image:url(https://s3.amazonaws.com/static.northpass.com/J%26J/4de5b8a6-6b5c-41f6-96a3-e2ef31cf00ad.jpeg)">
    </div>
    <div class="homepage-hero-slide-content">
      <div class="homepage-hero-slide-headline">
        Vision Excellence Institute
      </div>
      <div class="homepage-hero-slide-subheadline">
        Powered by Johnson & Johnson Professional Education
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
       $('.homepage-hero-carousel').on('init', function(slick){
      console.log(slick)
      $('.homepage-hero-carousel').css('display', 'block')
    })
    
    $(".homepage-hero-carousel").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false,
      infinite: true,
      cssEase: 'linear',
      prevArrow: '<svg viewBox="0 0 20 20" class="_1ycOA _left"><path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16" fill-rule="evenodd"></path></svg>',
      nextArrow: '<svg viewBox="0 0 20 20" class="_1ycOA _right"><path d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16" fill-rule="evenodd"></path></svg>'
    });

 
  });


</script>

<style>
  .np-homepage-hero-content {
    position: inherit;
  }

  .homepage-hero-slide {
    display: flex;
    flex-direction: row;
    background-color: #cc0033;
  }

  .homepage-hero-slide-image {
    height: 200px;
    width: 100%;
    background-size:cover;
    background-position:center;
  }

  .homepage-hero-slide-content {
    color:#fff;
    text-align:center;
    padding:32px 16px;
  }

  .homepage-hero-slide-headline {
    font-size: 28px;
    line-height: 32px;
    font-weight:700;
  }

  .homepage-hero-slide-subheadline {
    opacity: 0.85;
    margin-top:8px;
  }


  @media screen and (min-width: 768px) {
    .homepage-hero-slide {
      display: flex!important;
      min-height:300px;
    }

    .homepage-hero-slide-image {
      width: 50%;
      min-height: 100%;
      height:auto;
    }

    .homepage-hero-slide-content {
      width: 50%;
      padding:32px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  @media screen and (min-width: 992px) {
    .homepage-hero-slide-image {
      width: 40%;
    }

    .homepage-hero-slide-content {
      width: 60%;
      padding:48px;
    }

    .homepage-hero-slide-headline {
      font-size: 32px;
      line-height: 36px;
    }

    .homepage-hero-slide-subheadline {
      font-size:18px;
      line-height:20px;
    }
  }

  @media screen and (min-width: 1200px) {

    .homepage-hero-slide-headline {
      font-size: 40px;
      line-height: 48px;
    }
  }

  ._1ycOA {
    cursor: pointer;
    fill: #292824;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 1px rgba(66, 71, 76, 0.45), 0 2px 1px rgba(0, 0, 0, 0.05);
  }

  ._left:before,
  ._right:before {
    font-size: 30px;
    background: black;
    color: white;
    border-radius: 50%;
    font-style: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: Font awesome\5 Pro;
    font-weight: 900;
    margin-bottom: 0;
    -webkit-font-smoothing: antialiased;
  }

  ._left,
  ._right {
    top: 50%;
    z-index: 1000;
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(0, -50%);
    cursor: pointer;
    display: block;
  }

  ._right {
    right: 2%;
  }

  ._left {
    left: 2%;
  }
</style>