Cacher is the code snippet organizer for pro developers

//////////////////////////
HTML

            <div class="carousel">

                <ul class="slides">

                  <li>
                    <h2>Step 1</h2>
                    <!-- <img src="images/covered.jpg" alt=""> -->
                  </li>

                  <li>
                    <h2>Step 2</h2>
                    <!-- <img src="images/generation.jpg" alt=""> -->
                  </li>

                  <li>
                    <h2>Step 3</h2>
                    <!-- <img src="images/potter.jpg" alt=""> -->
                  </li>

                  <li>
                    <h2>Step 4</h2>
                    <!-- <img src="images/preschool.jpg" alt=""> -->
                  </li>

                  <li>
                    <h2>Step 5</h2>
                    <!-- <img src="images/soccer.jpg" alt=""> -->
                  </li>

                </ul>

              </div>


//////////////////////////
CSS


.carousel{
  --carousel-height: 400px;
    overflow:hidden;
    height:var(--carousel-height);
    width:100%;
}
.slides{
    height:var(--carousel-height);
    list-style:none;
    position:relative;
    width:500%; /* Number of panes * 100% */
    overflow:hidden; /* Clear floats */
        /* Slide effect Animations*/
    -moz-animation:carousel 30s infinite;
    -webkit-animation:carousel 30s infinite;
    animation:carousel 30s infinite;
}
.slides > li{
    height:var(--carousel-height);
    background-color:#f2f2f2;
    position:relative;
    float:left;
    width: 20%; /* 100 / number of panes */
}
.carousel img{
    display:block;
    width:100%;
    max-width:100%;
}
.carousel h2{
    margin-bottom: 0;
    font-size:1em;
    padding:1.5em 0.5em 1.5em 0.5em;
    position:absolute;
    right:0px;
    /*bottom:0px;*/
    left:0px;
    text-align:center;
    color:black;

    text-transform: uppercase;
}

@keyframes carousel{
    0%    { left:-5%; }
    11%   { left:-5%; }
    12.5% { left:-105%; }
    23.5% { left:-105%; }
    25%   { left:-205%; }
    36%   { left:-205%; }
    37.5% { left:-305%; }
    48.5% { left:-305%; }
    50%   { left:-405%; }
    61%   { left:-405%; }
    62.5% { left:-305%; }
    73.5% { left:-305%; }
    75%   { left:-205%; }
    86%   { left:-205%; }
    87.5% { left:-105%; }
    98.5% { left:-105%; }
    100%  { left:-5%; }
}