본문 바로가기
> 클론코딩/유튜브

How To Make An Infinite Autoplay Slider

by 자몽주스 2024. 7. 9.
728x90

(3) How To Make An Infinite Autoplay Slider - YouTube

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자동 슬라이드</title>
    <link href="autoplay.css" rel="stylesheet" />
  </head>
  <body>
    <div class="slider">
      <div class="slide-track">
        <div class="slide"><img src="/img/swiper-1.jpg" /></div>
        <div class="slide"><img src="/img/swiper-2.jpg" /></div>
        <div class="slide"><img src="/img/swiper-3.jpg" /></div>
        <div class="slide"><img src="/img/swiper-4.jpg" /></div>
        <div class="slide"><img src="/img/swiper-5.jpg" /></div>
        <div class="slide"><img src="/img/swiper-6.jpg" /></div>
        <div class="slide"><img src="/img/swiper-7.jpg" /></div>
        <div class="slide"><img src="/img/swiper-8.jpg" /></div>
        <div class="slide"><img src="/img/swiper-9.jpg" /></div>

        <!-- doubled -->
        <div class="slide"><img src="/img/swiper-1.jpg" /></div>
        <div class="slide"><img src="/img/swiper-2.jpg" /></div>
        <div class="slide"><img src="/img/swiper-3.jpg" /></div>
        <div class="slide"><img src="/img/swiper-4.jpg" /></div>
        <div class="slide"><img src="/img/swiper-5.jpg" /></div>
        <div class="slide"><img src="/img/swiper-6.jpg" /></div>
        <div class="slide"><img src="/img/swiper-7.jpg" /></div>
        <div class="slide"><img src="/img/swiper-8.jpg" /></div>
        <div class="slide"><img src="/img/swiper-9.jpg" /></div>
      </div>
    </div>
  </body>
</html>
CSS - 차례로 나열하기
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.slider {
  height: 250px;
  margin: auto;
  position: relative;
  width: 90%;
  display: grid;
  place-items: center;
}
.slide-track {
  display: flex;
  width: calc(250px * 18);
}
.slide {
  height: 200px;
  width: 250px;
  display: flex;
  align-items: center;
  padding: 15px;
}
img {
  width: 100%;
}

차례로 나열하기. 

GRADIENT SHADOWS

 

CSS
// SHADOWS
.slider::before,
.slider::after {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
  height: 100%;
  position: absolute;
  width: 15%;
  z-index: 2;
}

.slider::before {
  left: 0;
  top: 0;
}
.slider::after {
  left: 0;
  top: 0;
  transform: rotateZ(180deg);
}
IMAGE HOVER EFFECT

transform 추가.

CSS
.slide {
  height: 200px;
  width: 250px;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}
img {
  transition: transform 1s;
  width: 100%;
}

img:hover {
  transform: translateZ(20px);
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.slider {
  height: 250px;
  margin: auto;
  position: relative;
  width: 90%;
  display: grid;
  place-items: center;
}
.slide-track {
  display: flex;
  width: calc(250px * 18);
  animation: scroll 40s linear infinite;
}

.slide-track:hover {
  animation-play-state: paused; //멈추기
}
// keyframes
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 9));
  }
}

.slide {
  height: 200px;
  width: 250px;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}
img {
  transition: transform 1s;
  width: 100%;
}

img:hover {
  transform: translateZ(20px);
}

// // SHADOWS
// .slider::before,
// .slider::after {
//   background: linear-gradient(
//     to right,
//     rgba(255, 255, 255, 1) 0%,
//     rgba(255, 255, 255, 0) 100%
//   );
//   content: "";
//   height: 100%;
//   position: absolute;
//   width: 15%;
//   z-index: 2;
// }

// .slider::before {
//   left: 0;
//   top: 0;
// }
// .slider::after {
//   left: 0;
//   top: 0;
//   transform: rotateZ(180deg);
// }
가로 스크롤 바 없앤 버전. 
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.slider {
  overflow: hidden; // 가로 스크롤 바 맘에 안들어서 없애버렸다.
  height: 250px;

  margin: auto;
  position: relative;
  width: 90%;
  display: grid;
  place-items: center;
}
.slide-track {
  display: flex;
  width: calc(250px * 18);
  animation: scroll 40s linear infinite;
}

.slide-track:hover {
  animation-play-state: paused; //멈추기
}
// keyframes
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 9));
  }
}

.slide {
  height: 200px;
  width: 250px;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}
img {
  transition: transform 1s;
  width: 100%;
}

img:hover {
  transform: translateZ(20px);
}

// // SHADOWS
// .slider::before,
// .slider::after {
//   background: linear-gradient(
//     to right,
//     rgba(255, 255, 255, 1) 0%,
//     rgba(255, 255, 255, 0) 100%
//   );
//   content: "";
//   height: 100%;
//   position: absolute;
//   width: 15%;
//   z-index: 2;
// }

// .slider::before {
//   left: 0;
//   top: 0;
// }
// .slider::after {
//   left: 0;
//   top: 0;
//   transform: rotateZ(180deg);
// }
728x90
저작자표시 비영리 변경금지

티스토리툴바