Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="srp-module">
  <div class="home-featured-blocks-wrapper">
    <div class="home-featured-blocks" role="menu">
      <ul class="home-featured-block-nav">
        <li id="playPauseButton" aria-label="Stop automatic slideshow">
          <button>
          <i aria-hidden="true" class="fas fa-pause fa-lg"></i>
          </button>
        </li>
          <li id="prevSlideButton" aria-label="Previous slide" tabindex="0">
            <!--Left Arrow--><i aria-hidden="true" class="fas fa-chevron-left"></i>
          </li>
          <li id="nextSlideButton" aria-label="Next slide" tabindex="0">
            <!--Right Arrow--><i aria-hidden="true" class="fas fa-chevron-right"></i>
          </li>
        </ul>
      <ul class="home-featured-block-items" role="tablist">
        <li class="home-featured-block-item" role="tab" data-controls="1" tabindex="-1">
          <a href="#" tabindex="0">
            <span>
              <small>Husky 100</small>
            </span>
          </a>
        </li>
        <li class="home-featured-block-item" role="tab" data-controls="2" tabindex="-1">
          <a href="#" tabindex="0">
            <span>
              <small>COVID-19 in the northwest</small>
            </span>
          </a>
        </li>
        <li class="home-featured-block-item" role="tab" data-controls="3" tabindex="-1">
          <a href="#" tabindex="0">
            <span>
              <small>Our new home</small>
            </span>
          </a>
        </li>
        <li class="home-featured-block-item" role="tab" data-controls="4" tabindex="-1">
          <a href="#" tabindex="0">
            <span>
              <small>Air quality in schools</small>
            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <span role="tabpanel" aria-roledescription="slide" aria-label="1 of 5" id="1" class="home-featured-slide align-center" data-background="https://assets.codepen.io/2318148/slide-husky-100.jpg"><span class="home-featured-display-caption">
        <h2>Diversifying the face of health care</h2>
        <p>DEOHS student Sumaya Aden honored as Husky 100 winner for her community service and commitment to health equity</p>
        <p><a href="#">Read more <i class="fas fa-chevron-right fa-lg"></i></a></p>
      </span>
  </span>
  <span role="tabpanel" aria-roledescription="slide" aria-label="2 of 5" id="2" class="home-featured-slide align-bottom angle-white" data-background="https://assets.codepen.io/2318148/slide-covid-northwest.jpg"><span class="home-featured-display-caption">
        <h2>Supporting Northwest businesses and workers</h2>
        <p>DEOHS experts lead COVID-19 research and service activities to help protect workers and build resilient communities during the global pandemic</p>
        <p><a href="#">Read more <i class="fas fa-chevron-right fa-lg"></i></a></p>
      </span>
  </span>
  <span role="tabpanel" aria-roledescription="slide" aria-label="3 of 5" id="3" class="home-featured-slide darken" data-background="https://assets.codepen.io/2318148/slide-new-home.jpg"><span class="home-featured-display-caption">
        <h2>New location, boundless opportunities</h2>
        <p>Space for collaboration and innovation as DEOHS moves to the new Rosling Center for Population Health; new state-of-the-art labs coming soon</p>
        <p><a href="#">Read more <i class="fas fa-chevron-right fa-lg"></i></a></p>
      </span>
  </span>
  <span role="tabpanel" aria-roledescription="slide" aria-label="4 of 5" id="4" class="home-featured-slide darken-extra align-bottom" data-background="https://assets.codepen.io/2318148/slide-air-quality-schools.jpg"><span class="home-featured-display-caption">
        <h2>Monitoring air quality in schools</h2>
        <p>Does ultrafine air pollution infiltrate schools near Sea-Tac Airport? DEOHS researchers partner with South King County cities to find out.</p>
        <p><a href="#">Read more <i class="fas fa-chevron-right fa-lg"></i></a></p>
      </span>
  </span>

</div>
              
            
!

CSS

              
                body {
  margin: 0;
  background: #e5e5e5;
}

.srp-module {
  position: relative;
  height: 37rem;
  margin-top: -1px;
  margin-bottom: 1rem;
}

.srp-module span.home-featured-slide {
  display: block;
  width: 100%;
  height: 20rem;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  background-position-x: 25%;
  opacity: 0;
  transition: 0.2s opacity;
}

.srp-module span.home-featured-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.srp-module span.home-featured-slide.align-center {
  background-position-x: 50%;
}

.srp-module span.home-featured-slide.home-featured-active {
  opacity: 1;
  z-index: 1;
}

.srp-module span.home-featured-slide.home-featured-user {
  opacity: 1;
  z-index: 2;
}

.srp-module span.home-featured-slide > a {
  text-decoration: none;
}

.srp-module span.home-featured-slide span.home-featured-display-caption {
  position: relative;
  top: 20rem;
  height: 13.5rem;
  display: block;
  padding: 1rem;
  z-index: 4;
  background: rgb(255 255 255 / 1);
}

.srp-module span.home-featured-slide span.home-featured-display-caption > h2, .srp-module span.home-featured-slide span.home-featured-display-caption > p {
  color: #fff;
}

.srp-module span.home-featured-slide span.home-featured-display-caption > h2 {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: normal;
  font-size: 125%;
  color: #4B2E83;
  margin-top: 0;
}

.srp-module span.home-featured-slide span.home-featured-display-caption > p {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 90%;
  line-height: 1.35;
  margin-bottom: 0;
  color: #383838;
}

.srp-module span.home-featured-slide span.home-featured-display-caption > p > a {
  padding: .5rem .8rem .5rem 1rem;
  font-family: "Encode Sans", sans-serif;
  color: #4B2E83;
  display: inline-block;
  line-height: 24px;
  font-size: 14px;
  text-decoration: none !important;
  background-color: #fff;
  margin-top: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  user-select: none;
  box-shadow: -3px 2px 4px rgb(0 0 0 / 15%);
  transition: .2s background;
  z-index: 0;
}

.srp-module span.home-featured-slide span.home-featured-display-caption > p > a:hover, .srp-module span.home-featured-slide span.home-featured-display-caption > p > a:focus {
  background: rgba(255,255,255,.7);
}

.srp-module span.home-featured-slide span.home-featured-display-caption > p > a i.fas, .srp-module span.home-featured-slide span.home-featured-display-caption > p > a svg {
  margin-left: .5rem;
  color: #b7a57a;
}

.home-featured-blocks-wrapper {
  position: relative;
  padding-top: 20rem;
}

.home-featured-blocks-wrapper .home-featured-blocks ul {
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-items {
  display: none;
  margin: 2rem 7rem;
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-items::after {
  box-shadow: -3px 1px 8px rgba(0, 0, 0, 0.25);
  content: '';
  width: calc(100% - 14rem);
  height: 3.75rem;
  position: absolute;
  transform-origin: 0% 100%;
  transform: skew(-15deg);
  z-index: 1;
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8rem;
  display: flex;
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li {
  background: transparent!important;
  opacity: 1;
  transition: 0.2s opacity;
  z-index: 3;
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li > * {
  cursor: pointer;
  /*filter: drop-shadow(-1px 1px 3px rgb(0 0 0 / .5));*/
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li > i.fas, .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li > svg {
  filter: drop-shadow(-1px 1px 3px rgb(0 0 0 / .5));
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li:hover, .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li:focus {
  opacity: .7!important;
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li button {
  border-radius: 100%;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: #fff;
  box-shadow: -3px 1px 8px rgba(0, 0, 0, 0.25);
}

.home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li:nth-child(2), .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li:nth-child(3) {
  color: #fff!important;
  text-align: center;
  font-size: 200%;
  font-family: sans-serif;
  margin-bottom: 1rem;
  margin-right: 1rem;
  width: auto;
  height: auto;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li {
  position: relative;
  height: 2.75rem;
  width: 100%;
  z-index: 3;
  background: #fff;
  color: black;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-is-active {
  color: #fff !important;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-is-active + li, .home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-is-active::after {
  background: #4B2E83 !important;
  transition: 0.2s background;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-block-item:first-child {
  background: transparent !important;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-block-item:first-child.home-featured-is-active {
  background: unset !important;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-block-item:last-child {
  background: #fff;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-block-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: 0% 100%;
  transform: skew(-15deg);
  z-index: -1;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-block-item, .home-featured-blocks-wrapper .home-featured-blocks ul li.home-featured-block-item::after {
  transition: .2s background, .2s color;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li a {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li a:focus {
  border: 3px dashed #4B2E83;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li a span {
  display: block;
  position: relative;
  text-decoration: none;
  padding: .75rem 1rem;
  font-family: "Encode Sans", sans-serif;
  text-align: left;
  align-self: center;
  margin: 0 auto;
  line-height: 1.2;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li a span small {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  user-select: none;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li a span h3 {
  font-family: "Encode Sans", sans-serif;
  letter-spacing: 0.3px;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li a span p {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.home-featured-blocks-wrapper .home-featured-blocks ul li a span p,
.home-featured-blocks-wrapper .home-featured-blocks ul li a span small.cta {
  opacity: 0;
}

@media screen and (min-width: 992px) {
  body {
    background: #e5e5e5;
  }
  
  .srp-module {
    background: #4B2E83;
  }
  
  .srp-module::after {
    position: absolute;
    height: 80px;
    width: 100%;
    content: "";
    background: url(https://www.washington.edu/static/home/wp-content/themes/uw-2014/assets/images/stripes-dark-tile.svg);
    opacity: 0.3;
    z-index: 2;
    bottom: 0;
  }
  
  .srp-module span.home-featured-slide {
    height: 37rem!important;
  }
  
  .srp-module span.home-featured-slide.align-center {
    background-position-x: unset;
  }
  
  .srp-module span.home-featured-slide.align-top {
    background-position-y: 0%;
  }
  
  .srp-module span.home-featured-slide.align-bottom {
    background-position-y: 100%;
  }
  
  .srp-module span.home-featured-slide::after {
    content: unset;
  }
  
  .srp-module span.home-featured-slide.darken::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      hsla(0, 0%, 0%, 0.45) 0%,
      hsla(0, 0%, 0%, 0.444) 11.2%,
      hsla(0, 0%, 0%, 0.428) 21%,
      hsla(0, 0%, 0%, 0.403) 29.6%,
      hsla(0, 0%, 0%, 0.371) 37.1%,
      hsla(0, 0%, 0%, 0.333) 43.7%,
      hsla(0, 0%, 0%, 0.292) 49.6%,
      hsla(0, 0%, 0%, 0.247) 55%,
      hsla(0, 0%, 0%, 0.203) 60%,
      hsla(0, 0%, 0%, 0.158) 64.8%,
      hsla(0, 0%, 0%, 0.117) 69.6%,
      hsla(0, 0%, 0%, 0.079) 74.6%,
      hsla(0, 0%, 0%, 0.047) 80%,
      hsla(0, 0%, 0%, 0.022) 85.9%,
      hsla(0, 0%, 0%, 0.006) 92.5%,
      hsla(0, 0%, 0%, 0) 100%
    );
  }
  
  .srp-module span.home-featured-slide.darken-extra::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      hsla(0, 0%, 0%, 0.65) 0%,
      hsla(0, 0%, 0%, 0.642) 12.4%,
      hsla(0, 0%, 0%, 0.618) 23%,
      hsla(0, 0%, 0%, 0.582) 32.1%,
      hsla(0, 0%, 0%, 0.536) 39.8%,
      hsla(0, 0%, 0%, 0.481) 46.4%,
      hsla(0, 0%, 0%, 0.421) 52%,
      hsla(0, 0%, 0%, 0.357) 57.1%,
      hsla(0, 0%, 0%, 0.293) 61.6%,
      hsla(0, 0%, 0%, 0.229) 66%,
      hsla(0, 0%, 0%, 0.169) 70.3%,
      hsla(0, 0%, 0%, 0.114) 74.9%,
      hsla(0, 0%, 0%, 0.068) 79.9%,
      hsla(0, 0%, 0%, 0.032) 85.6%,
      hsla(0, 0%, 0%, 0.008) 92.2%,
      hsla(0, 0%, 0%, 0) 100%
    ), rgb(0 0 0 / 10%);
  }
  
  .srp-module span.home-featured-slide.angle-purple::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(-75deg, transparent 50%, #4B2E83 50%), linear-gradient(-75deg, transparent 50%, #fff 50%);
    z-index: 2;
  }

  .srp-module span.home-featured-slide.angle-purple::after, .srp-module span.home-featured-slide.angle-white::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.002) 14.9%,
      hsla(0, 0%, 0%, 0.009) 27.3%,
      hsla(0, 0%, 0%, 0.019) 37.5%,
      hsla(0, 0%, 0%, 0.032) 45.8%,
      hsla(0, 0%, 0%, 0.047) 52.6%,
      hsla(0, 0%, 0%, 0.063) 58.1%,
      hsla(0, 0%, 0%, 0.081) 62.6%,
      hsla(0, 0%, 0%, 0.099) 66.5%,
      hsla(0, 0%, 0%, 0.117) 70%,
      hsla(0, 0%, 0%, 0.133) 73.4%,
      hsla(0, 0%, 0%, 0.148) 77.1%,
      hsla(0, 0%, 0%, 0.161) 81.2%,
      hsla(0, 0%, 0%, 0.171) 86.3%,
      hsla(0, 0%, 0%, 0.178) 92.4%,
      hsla(0, 0%, 0%, 0.18) 100%
    );
    z-index: 3;
  }

  .srp-module span.home-featured-slide.angle-white::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(-75deg, transparent 50%, #fff 50%), linear-gradient(-75deg, transparent 50%, #fff 50%);
    z-index: 2;
  }
  
  .srp-module span.home-featured-slide span.home-featured-display-caption {
    font-size: 120%;
    position: absolute;
    height: calc(35rem - 5rem);
    padding: 0 55% 0 15%;
    background: unset;
    top: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .srp-module span.home-featured-slide span.home-featured-display-caption > h2 {
    font-size: revert;
    letter-spacing: -0.3px;
    color: #fff;
  }

  .srp-module span.home-featured-slide span.home-featured-display-caption > p {
    font-size: 100%;
    color: #fff;
  }
  
  .srp-module span.home-featured-slide.angle-white span.home-featured-display-caption > h2 {
    color: #4B2E83;
  }

  .srp-module span.home-featured-slide.angle-white span.home-featured-display-caption > p {
    color: #383838!important;
  }

  .srp-module span.home-featured-slide span.home-featured-display-caption > * {
    margin: 0 0 1rem 0;
    text-shadow: -4px 2px 10px rgb(0 0 0 / .35);
  }

  .srp-module span.home-featured-slide span.home-featured-display-caption > h2 > * {
    text-shadow: -4px 2px 10px rgb(0 0 0 / .35);
  }

  .srp-module span.home-featured-slide.angle-purple span.home-featured-display-caption > *, .srp-module span.home-featured-slide.angle-white span.home-featured-display-caption > *, .srp-module span.home-featured-slide.angle-purple span.home-featured-display-caption .fas, .srp-module span.home-featured-slide.angle-white span.home-featured-display-caption .fas, .srp-module span.home-featured-slide span.home-featured-display-caption > p:nth-of-type(2) {
    text-shadow: unset!important;
  }
  
  .home-featured-blocks-wrapper {
    height: 100vh;
    position: unset;
    padding-top: 0;
  }
  
  .home-featured-blocks-wrapper .home-featured-blocks {
    position: absolute;
    bottom: -3.75rem;
    top: unset;
    left: 0;
    right: 0;
  }
  
  .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav {
    position: absolute;
    bottom: 6rem;
    right: unset;
    display: flex;
    padding: 0 55% 0 15%;
  }
  
  .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li:nth-child(2), .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li:nth-child(3) {
    margin-bottom: 1.75rem;
  }
  
  .home-featured-blocks-wrapper .home-featured-blocks ul {
    display: flex!important;
    align-items: flex-end;
  }

  .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-items li {
    position: relative;
    height: 3.75rem;
    width: 100%;
    z-index: 3;
    background: #fff;
    color: #444444;
    /*filter: drop-shadow(0.3rem 0.1rem 0.2rem rgba(0, 0, 0, 0.2));*/
  }

  .home-featured-blocks-wrapper .home-featured-blocks ul li a span {
    padding: .5rem;
    padding-left: 1.5rem;
    padding-top: calc(.5rem - 4px)!important;
    text-align: center;
  }
  
  .home-featured-blocks-wrapper .home-featured-blocks ul li a span p,
  .home-featured-blocks-wrapper .home-featured-blocks ul li a span small.cta {
    opacity: 0;
    transition: 0.2s opacity;
  }
  .home-featured-blocks-wrapper .home-featured-blocks ul li:hover a span p,
  .home-featured-blocks-wrapper .home-featured-blocks ul li a span small.cta {
    opacity: 1;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .srp-module {
    font-size: 90%;
  }
  .home-featured-blocks-wrapper .home-featured-blocks ul li {
    height: 4rem;
  }
  .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-items li:hover, .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-items li a {
    /*padding-bottom: 6rem;*/
  }
  .home-featured-blocks-wrapper .home-featured-blocks ul li a span {
    padding-left: 1.75rem;
  }
}

@media screen and (min-width: 1200px) {
  .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-items li, .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li {
    height: 3.75rem;
  }
  .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-items li:hover, .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-items li a {
    /*padding-bottom: 5rem;*/
  }
  .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li:nth-child(2), .home-featured-blocks-wrapper .home-featured-blocks ul.home-featured-block-nav li:nth-child(3) {
    margin-bottom: 1.5rem;
  }
}

@media screen and (min-width: 992px) and (max-width: 1550px) {
  .srp-module span.home-featured-slide.angle-purple, .srp-module span.home-featured-slide.angle-white {
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 100%;
  }
}
@media screen and (min-width: 1550px) {
  .srp-module span.home-featured-slide.angle-purple, .srp-module span.home-featured-slide.angle-white {
    background-size: 65%;
    background-position: 100%;
  }
}
              
            
!

JS

              
                $(document).ready(function () {
  /* Changes slides automatically */
  var sliderIndex = 0;
  var lastSlideHover = 0;
  var currentTab = $(".home-featured-block-item")[0];
  let sliderPaused;
  var sliderTimer;
  carousel();

  function carousel() {
    var i;
    var slide = $(".home-featured-slide");
    var blockItem = $(".home-featured-block-item");
    for (i = 0; i < slide.length; i++) {
      slide[i].classList.remove("home-featured-active");
      blockItem[i].classList.remove("home-featured-is-active");
    }
    sliderIndex++;
    if (sliderIndex > slide.length) {
      sliderIndex = 1;
    }
    slide[sliderIndex - 1].classList.add("home-featured-active");
    blockItem[sliderIndex - 1].classList.add("home-featured-is-active");
    lastSlideHover = $(blockItem[sliderIndex - 1]).attr("data-controls");
    if (lastSlideHover > 0) {
      $("#" + lastSlideHover).removeClass("home-featured-user");
    }
    currentTab = blockItem[sliderIndex - 1];
    sliderPaused = false;
    sliderTimer = setTimeout(carousel, 5000); // Change slide every 5 seconds
  }

  function sliderHandleEvent(event) {
    var flag = false;

    switch (event.key) {
      case "ArrowRight":
        nextSlide(event);
        flag = true;
        break;

      case "ArrowLeft":
        previousSlide(event);
        flag = true;
        break;

      // case 'Home':
      // this.setSelectedTab(0, true);
      // flag = true;
      // break;

      // case 'End':
      // this.setSelectedTab(this.tabNodes.length - 1, true);
      // flag = true;
      // break;

      default:
        break;
    }

    if (flag) {
      event.stopPropagation();
      event.preventDefault();
    }
  }

  function playSlideShow(ele) {
    currentTab = ele;
    var target = $("#" + $(ele).attr("data-controls"));
    lastSlideHover = $(ele).attr("data-controls");
    var layerBeneath = $(".home-featured-was-active");
    $(layerBeneath)
      .removeClass("home-featured-was-active")
      .addClass("home-featured-active");
    carousel();
  }

  function pauseSlideShow(ele, hoverOrClick) {
    if (hoverOrClick === "click") {
      currentTab = ele;
      clearTimeout(sliderTimer);
    } else {
      currentTab = ele;
      clearTimeout(sliderTimer);
      var target = $("#" + $(ele).attr("data-controls"));
      if (lastSlideHover > 0) {
        $("#" + lastSlideHover).removeClass("home-featured-user");
      }
      $(target).addClass("home-featured-user");
      var layerBeneath = $(".home-featured-active");
      $(layerBeneath)
        .addClass("home-featured-was-active")
        .removeClass("home-featured-active");
      $(ele).addClass("home-featured-is-active");
      for (var i = 1; i < 6; i++) {
        if ($(ele).attr("data-controls") != i) {
          $("*[data-controls=" + i + "]").removeClass(
            "home-featured-is-active"
          );
        } else {
          sliderIndex = i - 1;
        }
      }
    }
  }

  /* Slideshow Controls JS for Pause, Play, Next, Prev */
  function playPause(e) {
    if (e.key == "Tab") {
      return;
    } else if (e.key == "Enter") {
      e.stopPropagation();
      e.preventDefault();
    }
    if (e.currentTarget.ariaLabel.toUpperCase().includes("STOP")) {
      e.currentTarget.ariaLabel = "Start automatic slideshow";
      let pauseSpanTag = document.createElement("button");
      let pausePTag = document.createElement("svg");
      pauseSpanTag.classList.add("pausePlay");
      pauseSpanTag.ariaHidden = true;
      pausePTag.classList.add("fas");
      pausePTag.classList.add("fa-play");
      pausePTag.classList.add("fa-lg");
      pausePTag.ariaHidden = true;
      pausePTag.classList.add("pause");
      pausePTag.innerHTML = "";
      e.currentTarget.innerHTML = "";
      pauseSpanTag.appendChild(pausePTag);
      e.currentTarget.appendChild(pauseSpanTag);
      pauseSlideShow(currentTab, "click");
      sliderPaused = true;
      lastSlideHover = $(currentTab).attr("data-controls");
    } else {
      e.currentTarget.ariaLabel = "Stop automatic slideshow";
      let pauseSpanTag = document.createElement("button");
      let pausePTag = document.createElement("svg");
      pauseSpanTag.classList.add("pausePlay");
      pauseSpanTag.ariaHidden = true;
      pausePTag.classList.add("fas");
      pausePTag.classList.add("fa-pause");
      pausePTag.classList.add("fa-lg");
      pausePTag.ariaHidden = true;
      pausePTag.classList.add("pause");
      pausePTag.innerHTML = "";
      e.currentTarget.innerHTML = "";
      pauseSpanTag.appendChild(pausePTag);
      e.currentTarget.appendChild(pauseSpanTag);
      playSlideShow(currentTab);
    }
  }

  function previousSlide(e) {
    if (e.key == "Tab") {
      return;
    }
    clearTimeout(sliderTimer);
    let slides = document.getElementsByClassName("home-featured-slide");
    var blockItems = $(".home-featured-block-item");
    currentTab.classList.add("home-featured-was-active");
    currentTab.classList.remove("home-featured-is-active");
    sliderIndex = currentTab.getAttribute("data-controls");
    lastSlideHover = $(currentTab).attr("data-controls");
    console.log(currentTab);
    if (sliderIndex > 1) {
      slides[sliderIndex - 1].classList.remove("home-featured-user");
      slides[sliderIndex - 1].classList.remove("home-featured-active");
      slides[sliderIndex - 2].classList.add("home-featured-user");
      slides[sliderIndex - 2].classList.add("home-featured-active");
      blockItems[sliderIndex - 1].classList.remove("home-featured-is-active");
      blockItems[sliderIndex - 2].classList.add("home-featured-is-active");
      blockItems[sliderIndex - 2].classList.remove("home-featured-was-active");
      currentTab = blockItems[sliderIndex - 2];
      currentTab.focus();
      sliderIndex = sliderIndex - 2;
    } else if (sliderIndex == 1) {
      slides[sliderIndex - 1].classList.remove("home-featured-user");
      slides[sliderIndex - 1].classList.remove("home-featured-active");
      slides[slides.length - 1].classList.add("home-featured-user");
      slides[slides.length - 1].classList.add("home-featured-active");
      blockItems[sliderIndex - 1].classList.remove("home-featured-is-active");
      blockItems[slides.length - 1].classList.add("home-featured-is-active");
      blockItems[slides.length - 1].classList.remove(
        "home-featured-was-active"
      );
      currentTab = blockItems[slides.length - 1];
      currentTab.focus();
      sliderIndex = slides.length - 1;
    } else if (sliderIndex == 0) {
      slides[slides.length - 1].classList.remove("home-featured-user");
      slides[slides.length - 1].classList.remove("home-featured-active");
      slides[slides.length - 2].classList.add("home-featured-user");
      slides[slides.length - 2].classList.add("home-featured-active");
      blockItems[slides.length - 1].classList.remove("home-featured-is-active");
      blockItems[slides.length - 2].classList.add("home-featured-is-active");
      blockItems[slides.length - 2].classList.remove(
        "home-featured-was-active"
      );
      currentTab = blockItems[slides.length - 2];
      currentTab.focus();
      sliderIndex = slides.length - 2;
    }
    if (
      $("#playPauseButton").attr("aria-label").toUpperCase().includes("STOP")
    ) {
      console.log("");
      carousel();
    }
  }

  function nextSlide(e) {
    if (e.key == "Tab") {
      return;
    }
    clearTimeout(sliderTimer);
    let slides = document.getElementsByClassName("home-featured-slide");
    var blockItems = $(".home-featured-block-item");
    currentTab.classList.add("home-featured-was-active");
    currentTab.classList.remove("home-featured-is-active");
    sliderIndex = currentTab.getAttribute("data-controls");
    lastSlideHover = $(currentTab).attr("data-controls");
    console.log(currentTab + " slide len: " + slides.length);
    console.log("sliderIndex: " + sliderIndex);
    // if (sliderIndex == slides.length) {
    //     sliderIndex == slides.length-1;
    // }
    if (sliderIndex < slides.length && sliderIndex > 0) {
      slides[sliderIndex - 1].classList.remove("home-featured-user");
      slides[sliderIndex - 1].classList.remove("home-featured-active");
      slides[sliderIndex].classList.add("home-featured-user");
      slides[sliderIndex].classList.add("home-featured-active");
      blockItems[sliderIndex - 1].classList.remove("home-featured-is-active");
      blockItems[sliderIndex].classList.add("home-featured-is-active");
      blockItems[sliderIndex].classList.remove("home-featured-was-active");
      currentTab = blockItems[sliderIndex];
      currentTab.focus();
      // sliderIndex = sliderIndex
    } else if (sliderIndex > slides.length - 1) {
      slides[sliderIndex - 1].classList.remove("home-featured-user");
      slides[sliderIndex - 1].classList.remove("home-featured-active");
      slides[0].classList.add("home-featured-user");
      slides[0].classList.add("home-featured-active");
      blockItems[sliderIndex - 1].classList.remove("home-featured-is-active");
      blockItems[0].classList.add("home-featured-is-active");
      blockItems[0].classList.remove("home-featured-was-active");
      currentTab = blockItems[0];
      currentTab.focus();
      sliderIndex = 0;
    }
    if (
      $("#playPauseButton").attr("aria-label").toUpperCase().includes("STOP")
    ) {
      console.log("" + sliderIndex);
      carousel();
    }
  }

  let playPauseButton = $("#playPauseButton");
  playPauseButton.click(playPause);
  playPauseButton.keydown(playPause);
  let prevSlideButton = $("#prevSlideButton");
  prevSlideButton.click(previousSlide);
  prevSlideButton.keydown(previousSlide);
  let nextSlideButton = $("#nextSlideButton");
  nextSlideButton.click(nextSlide);
  nextSlideButton.keydown(nextSlide);

  /* Controls slide background images and behavior on hover */
  $.each($(".home-featured-block-item"), function () {
    $(this).keydown(sliderHandleEvent);
    var target = $("#" + $(this).attr("data-controls"));
    if (target.length > 0) {
      if ($(target).attr("data-background") !== "") {
        $(target).css(
          "background-image",
          "url(" + $(target).attr("data-background") + ")"
        );
        $(target).removeAttr("data-background");
      }
      $(this).hover(
        function () {
          if (!sliderPaused) {
            pauseSlideShow($(this), "hover");
          } else {
            console.log(lastSlideHover);
            //need to make hover work when slider sliderPaused
            var target = $("#" + $(this).attr("data-controls"));
            if (lastSlideHover > 0) {
              $("#" + lastSlideHover).removeClass("home-featured-user");
            }
            $(target).addClass("home-featured-user");
            var layerBeneath = $(".home-featured-active");
            console.log(layerBeneath.length);
            $(layerBeneath)
              .addClass("home-featured-was-active")
              .removeClass("home-featured-active");
            $(this).addClass("home-featured-is-active");
            var slide = $(".home-featured-slide");
            for (var i = 1; i < 6; i++) {
              if ($(this).attr("data-controls") != i) {
                $("*[data-controls=" + i + "]").removeClass(
                  "home-featured-is-active"
                );
                slide[i - 1].classList.remove("home-featured-user");
              } else {
                slide[i - 1].classList.add("home-featured-active");
                slide[i - 1].classList.remove("home-featured-was-active");
                console.log(slide[i - 1]);
                sliderIndex = i - 1;
              }
            }
            currentTab = $(this)[0];
            lastSlideHover = currentTab;
          }
        },
        function () {
          if (!sliderPaused) {
            playSlideShow($(this));
          }
        }
      );
    }
  });
});

              
            
!
999px

Console