Elementor Image Slider - Pure CSS

image-slider.css

/**
* CSS Code for Animated Reviews Slider
* Chatbot Landing Page Design Tutorial
* Author: Mian Shahzad Raza
**/
.animated-reviews {
  text-align: center;
  position: relative;
  z-index: 1;
  background-color: #fff;
  width: 1240px;
  margin: 0 auto;
  padding: 30px 0;
}
.animated-reviews .group {
  width: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
}
.animated-reviews .group .row {
  width: 180%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  transform: translate3d(25%, 0, 0);
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: ticker;
          animation-name: ticker;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.animated-reviews .group .row:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.animated-reviews .group .row:nth-child(even) {
  animation-direction: reverse;
}
.animated-reviews .group .row .elementor-widget-image {
  position: relative;
}
@-webkit-keyframes ticker {
  0% {
    transform: translate3d(25%, 0, 0);
  }
  100% {
    transform: translate3d(-25%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    transform: translate3d(25%, 0, 0);
  }
  100% {
    transform: translate3d(-25%, 0, 0);
  }
}
@media (max-width: 940px) {
	.animated-reviews {
		width: 100%;
	}
	.animated-reviews .group {
		min-height: 300px;
	}
	.animated-reviews .group .row {
		width: 300%;
	}
}
@media (max-width: 480px) {
	.animated-reviews {
		width: 100%;
	}
	.animated-reviews .group {
		min-height: 200px;
	}
	.animated-reviews .group .row {
		width: 400%;
	}
}