Pure CSS Image Slider With Parallax Effect

Preview:

Description:

A CSS only image carousel slider that automatically slides through images with a parallax effect.

See It In Action:

See the Pen
Parallax Horizontal Image Scroller — No JS! by TharenaMelishka (@TharenaMelishka)
on CodePen.

How to use it:

1. Insert your images into the slider container.

<div class=container>
  <div id="proparallax">
    <img class="one" src="1.jpg" /> 
    <img class="two" src="2.jpg" />
    <img class="three" src="3.jpg" />
  </div>
</div>

2. The primary CSS styles for the slider.

#proparallax {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 37.5rem;
  border: 10px solid black;
  box-shadow: 0px 8px 10px 8px grey;
} 
#proparallax img {
  position: absolute;
  width: 50rem;
  height: 37.5rem;
  overflow: hidden;
  object-fit: cover;
}

3. Apply parallax scrolling effects to images.

#proparallax img.one{
  animation-name: parallax_one; /* controls img.one movement */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 18s;
  animation-direction: forwards;
  object-fit: cover;
}
#proparallax img.two {
  animation-name: parallax_two; /* controls img.two movement */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 18s;
  animation-direction: forwards;
  object-fit: cover;
}
#proparallax img.three {
  animation-name: parallax_three; /* controls img.three movement */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 18s;
  animation-direction: forwards;
  object-fit: cover;
}
@keyframes parallax_one { /* controls img.one movement */
  0% { /* .imageloaded */
    height: 37.5rem;
    width: 50rem;
    left: 0rem;
    opacity: 1;
  }
  /* .imagehold runs from 0 to 27.77% */
  27.77% { /* .imageloaded */
    width: 50rem;
    left: 0rem;
  }
  27.78% { /* .imagepreunload */
    width: 50rem;
    left: 0rem;
    right: 50rem;
  }
  33.33% { /* .imageunloaded */
    height: 37.5rem;
    width: 0rem;
    left: 0rem;
    right: 0rem;
    opacity: 1;
  }
  33.34% { /* imageoff */
    opacity: 0; 
  }
  94.43% { /* .imageon */
    left: 0rem;
    opacity: 0;
  }
  94.44% { /* .imageinitial */
    height: 37.5rem;
    width: 0rem;
    left: 50rem;
    opacity: 1;
  }
  100% { /* .imageloaded */
    width: 50rem;
    left: 0rem;
    opacity: 1;   
  }
}
@keyframes parallax_two { /* controls img.two movement */
  0% { /* .imageoff */
    opacity: 0;
  }
  27.77% { /* .imageon */
    left: 0rem;
    opacity: 0;
  }
  27.78% { /* .imageinitial */
    width: 0rem;
    height: 37.5rem;
    left: 50rem;
    opacity: 1;
  }
  33.33% { /* .imageloaded */
    width: 50rem;
    left: 0rem;
  }
  /* .imagehold runs from 33.34% - 61.10% */
  61.10%{ /* .imageloaded */
    width: 50rem;
    left: 0rem;
  }
  61.11% { /* .imagepreunload */
    width: 50rem;
    left: 0rem;
    right: 50rem;
  }
  66.67% { /* .imageunloaded */
    width: 0rem;
    right: 0rem;
    left: 0rem;
    height: 37.5rem;
    opacity: 1;
  }
  66.68% { /* .imageoff */
    opacity: 0;
  }
  100% { /* .imageoff */
    opacity: 0;
  }
}
@keyframes parallax_three { /* controls img.three movement */
  0% { /* .imageoff */
    opacity: 0;
  }
  61.10%{ /* .imageon */
    opacity: 0;
  }
  61.11% { /* .imageinitial */
    width: 0rem;
    height: 37.5rem;
    left: 50rem;
    opacity: 1;   
  }
  66.67% { /* .imageloaded */
    width: 50rem;
    left: 0rem;
  }
  /* .imagehold runs from 66.67% - 94.43% */
  94.43% { /* .imageloaded */
    width: 50rem;
    left: 0rem;
  }
  94.44% { /* .imagepreunload */
    width: 50rem;
    left: 0rem;
    right: 50rem;
  }
  100% { /* imageunloaded */
    width: 0rem;
    right: 0rem;
    left: 0rem;
    height: 37.5rem;
    opacity: 1;
  }
}