Share Your Work

KKozel
Participant

Image slideshow not transitioning correctly

I am creating a slideshow with images and text, but the slide starts then starts overlapping and then turns black. Here's a link as an example: https://app.hubspot.com/design-previewer/2446169/modules/66334288661. I am new to code and am unsure what's going on. I think in the cycleImages is where something went wrong, but I am not sure. I followed a video to help, but mine still does the overlapping and then just a black screen. Someone please help!
 
Here is my HTML:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Slider</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
   <div class="slideshow">
     <div class="slideshow-item">
       <img src="https://f.hubspotusercontent10.net/hubfs/2446169/020222-024.jpg" alt="">
       <div class="slideshow-item-text">
         <h5>Will you be a new student this spring?</h5>
         <a href="https://www.hocking.edu/quickstart">Register for QuickStart now</a>
       </div>
     </div>
  
     <div class="slideshow">
     <div class="slideshow-item">
       <img src="https://f.hubspotusercontent10.net/hubfs/2446169/FAFSA_computer.jpg" alt="">
       <div class="slideshow-item-text">
         <h5>Need help with the FAFSA? Sign up for a free help session!</h5>
         <a href="https://www.hocking.edu/fafsa-workshop">Learn more</a>
       </div>
     </div>
    
       <div class="slideshow">
     <div class="slideshow-item">
       <img src="https://f.hubspotusercontent10.net/hubfs/2446169/Elle%20King%20(1).png" alt="">
       <div class="slideshow-item-text">
         <h5>Black Diamond Music Festival | June 10-12</h5>
         <a href="https://www.blackdiamondmusicfestival.com/">See the Lineup</a>
       </div>
     </div>
    
         <div class="slideshow">
     <div class="slideshow-item">
       <img src="https://f.hubspotusercontent10.net/hubfs/2446169/0924-042.jpg" alt="">
       <div class="slideshow-item-text">
         <h5>Job-ready training at the Fairfield County Workforce Center</h5>
        <a href="https://www.hocking.edu/fairfield-county-workforce-center">Click here for more information</a>
       </div>
     </div>
   
      
    
  </body>
</html>

Here is my CSS code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 10px;
}

body{
  background-color: #000;
}

.slideshow{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.slideshow-item{
  width: inherit;
  height: inherit;
  position: absolute;
  opacity: 0;
  animation: cycleImages 31s infinite;
}

.slideshow-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoom 31s infinite;
}

.slideshow-item:nth-child(1),
.slideshow-item:nth-child(1) img{
  animation-delay: 0s;
}

.slideshow-item:nth-child(2),
.slideshow-item:nth-child(2) img{
  animation-delay: 10s;
}

.slideshow-item:nth-child(3),
.slideshow-item:nth-child(3) img{
  animation-delay: 20s;
}
  
.slideshow-item:nth-child(4),
.slideshow-item:nth-child(4) img{
  animation-delay: 30s;
} 

.slideshow-item-text{
  max-width: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,.8);
  color: #fff;
  padding: 10rem 5rem;
}

.slideshow-item-text h5{
  font-size: 5rem;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 2.5rem;
}

.slideshow-item-text p{
  font-size: 1.6rem;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;
}

@keyframes cycleImages {
  25%{
    opacity: 1;
  }
  40%{
    opacity: 0;
  }
}
  
@keyframes zoom {
  100%{
    transform: scale(1.3);
  }
}

@media screen and (max-width: 1000px) {
  .slideshow-item-text{
  max-width: 70%;
  padding: 5rem 1rem;
}
  .slideshow-item-text h5{
    font-size: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .slideshow-item-text{
    max-width: 100%;
    padding: 2rem;
    top: initial;
    bottom: 0;
    transform: initial;

}
  .slideshow-item-text h5{
    font-size: 3rem;
  }
}

.slideshow-item-text p{
  font-size: 1.4rem;
}
0 Upvotes
2 Replies 2
HHilgeman
Member

Image slideshow not transitioning correctly

It is very interesting if you have found a bug in your code. Unfortunately, I can't find a problem that would prevent you from getting the results you want, since I, too, started studying this area relatively recently. So far your code seems complicated, and I'm not talking about finding bugs in it and knowing how to fix them. For now, I can advise you to focus on the code the Docs&Slides Directory guys use for their runs and slideshows. I think it might help you since their code is in the public domain, which will give you some practical knowledge and even help you figure out what's wrong. Good luck and I hope you have success with your project.

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Image slideshow not transitioning correctly

@KKozel 

Unfortunately, we cannot see links that start with app.hubspot.  We would have to members of your account.

Do you have this on a demo page we could see?

0 Upvotes