Breaking News: Grepper is joining You.com. Read the official announcement!

scrollLeft css slider logo

Happy Herring answered on February 22, 2023 Popularity 1/10 Helpfulness 1/10

answer scrollLeft css slider logo

scrollLeft css slider logo

Comment

.slider2 {
  background: white;
  /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);  */
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
}

.slider2::before,
.slider2::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider2::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider2::before {
  left: 0;
  top: 0;
}

.slider2 .slide-track2 {
  -webkit-animation: scroll 5s linear infinite;
  animation: scroll 5s linear infinite;
  display: flex;
  width: fit-content;
}

.slider2 .slide2 {
  height: 100px;
  width: 250px;
  display: flex;
}

@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* scroll only 50% */
    transform: translateX(-50%);
  }
}

Popularity 1/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: css slider

Link to this answer
Share Copy Link

Contributed on Feb 22 2023

Happy Herring

0 Answers Avg Quality 2/10

scrollLeft css slider logo

Contents

More Related Answers

scrollLeft css slider logo

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.