Link
Recent Posts
Recent Comments
«   2025/11   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Tags more
Today
Total
관리 메뉴

웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 애니메이티드 이미지 슬라이더 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] 애니메이티드 이미지 슬라이더

해피CGI윤실장 2025. 10. 29. 09:08

좌우 버튼 클릭 시 이미지 카드가 부드럽게 순환되는 슬라이더.
두 번째 카드에만 제목과 설명이 표시되며 자연스러운 전환 효과가 특징임.

HTML, CSS, JavaScript로 구성된 간단한 순환형 이미지 슬라이더입니다.
버튼 클릭 시 첫 번째 카드는 뒤로, 마지막 카드는 앞으로 이동하며 자연스럽게 순환됩니다.
중앙의 카드에는 제목, 설명, 버튼이 애니메이션 효과로 표시됩니다.
가볍고 확장성이 좋아 포트폴리오, 여행, 제품 소개 등에 활용하기 적합합니다.

HTML 구조

  <body>

    <div class="container">

      <div class="slide">

        <div

          class="item"

          style="

            background-image: url('https://images.unsplash.com/photo-1478760329108-5c3ed9d495a0?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');

          "

        >

          <div class="content">

            <div class="name">Scotland</div>

            <div class="des">

              Experience the mystical Highlands under twilight skies and misty lochs.

            </div>

            <a

              class="seeMore"

              target="_blank"

              href="https://github.com/MDJAmin"

              ><button>See More</button></a

            >

          </div>

        </div>

 

        <div

          class="item"

          style="

            background-image: url('https://images.unsplash.com/photo-1439792675105-701e6a4ab6f0?q=80&w=1173&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');

          "

        >

          <div class="content">

            <div class="name">Norway</div>

            <div class="des">

              Chase the Northern Lights under star-lit skies along scenic fjord roads.

            </div>

            <a

              class="seeMore"

              target="_blank"

              href="https://github.com/MDJAmin"

              ><button>See More</button></a

            >

          </div>

        </div>

 

        <div

          class="item"

          style="

            background-image: url('https://images.unsplash.com/photo-1483982258113-b72862e6cff6?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');

          "

        >

          <div class="content">

            <div class="name">New Zealand</div>

            <div class="des">

              Wander dramatic, mist-laden mountain paths that feel straight out of a dream.

            </div>

            <a

              class="seeMore"

              target="_blank"

              href="https://github.com/MDJAmin"

              ><button>See More</button></a

            >

          </div>

        </div>

 

        <div

          class="item"

          style="

            background-image: url('https://images.unsplash.com/photo-1477346611705-65d1883cee1e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');

          "

        >

          <div class="content">

            <div class="name">Japan</div>

            <div class="des">

              Discover serene mountain temples shrouded in dusk and ancient forest trails.

            </div>

            <a

              class="seeMore"

              target="_blank"

              href="https://github.com/MDJAmin"

              ><button>See More</button></a

            >

          </div>

        </div>

      </div>

      <div class="button">

        <button class="prev">◁</button>

        <button class="next">▷</button>

      </div>

    </div>

    <div class="MDJAminDiv">

      <a

        class="MDJAmin"

        href="https://github.com/MDJAmin"

        target="_blank"

        >MDJAmin</a

      >

    </div>

    <script src="js/script.js"></script>

  </body>

 



CSS 소스

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

 

body {

  background: #b9bbb9;

  overflow: hidden;

}

 

.container {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 800px;

  height: 400px;

  background: #f5f5f5;

  box-shadow: 0 30px 50px #dbdbdb;

  border-radius: 20px;

}

.container .slide {

  border-radius: 20px;

}

.container .slide .item {

  width: 200px;

  height: 250px;

  position: absolute;

  top: 50%;

  transform: translate(0, -50%);

  border-radius: 20px;

  box-shadow: 0 30px 50px #505050;

  background-position: 50% 50%;

  background-size: cover;

  display: inline-block;

  transition: all 0.5s;

}

 

.slide .item:nth-child(1),

.slide .item:nth-child(2) {

  top: 0;

  left: 0;

  transform: translate(0, 0);

  border-radius: 0;

  width: 100%;

  height: 100%;

  border-radius: 20px;

  transition: all .5s;

}

 

.slide .item:nth-child(3) {

  left: 50%;

}

.slide .item:nth-child(4) {

  left: calc(50% + 220px);

}

.slide .item:nth-child(5) {

  left: calc(50% + 440px);

}

 

.slide .item:nth-child(n + 6) {

  left: calc(50% + 660px);

  opacity: 0;

}

.item .content {

  position: absolute;

  top: 50%;

  left: 100px;

  width: 300px;

  text-align: left;

  color: #eee;

  transform: translate(0, -50%);

  font-family: system-ui;

  display: none;

}

 

.slide .item:nth-child(2) .content {

  display: block;

}

 

.content .name {

  font-size: 40px;

  text-transform: uppercase;

  font-weight: bold;

  opacity: 0;

  animation: animate 1s ease-in-out 1 forwards;

}

 

.content .des {

  margin-top: 10px;

  margin-bottom: 20px;

  opacity: 0;

  animation: animate 1s ease-in-out 0.3s 1 forwards;

}

 

.content button {

  padding: 10px 20px;

  border: none;

  cursor: pointer;

  opacity: 0;

  border-radius: 10px;

  background-color: rgba(255, 255, 255, 0.673);

  transition: all 0.5s;

  animation: animate 1s ease-in-out 0.6s 1 forwards;

}

 

.content button:hover {

  background-color: rgb(255, 255, 255);

}

 

@keyframes animate {

  from {

    opacity: 0;

    transform: translate(0, 100px);

    filter: blur(33px);

  }

 

  to {

    opacity: 1;

    transform: translate(0);

    filter: blur(0);

  }

}

 

.button {

  display: flex;

  flex-direction: row;

  gap: 20px;

  left: 45%;

  right: 50%;

  width: 100%;

  align-items: center;

  text-align: center;

  position: absolute;

  bottom: 20px;

}

 

.button button {

  width: 40px;

  height: 35px;

  border-radius: 8px;

  border: none;

  cursor: pointer;

  margin: 0 5px;

  border: 2px solid #000000bd;

  transition: 0.3s;

  background: rgba(255, 255, 255, 0.578);

}

 

.button button:hover {

  color: #000000;

  border: 2px solid #ffffffbd;

  transform: scale(1.1);

}

.button button:focus {

  transform: scale(1.1);

  background: #ffffff;

  border: 2px solid #ffffffbd;

}

.button button:active {

  transform: scale(1.02);

}

.next {

  padding: 0 0 0 3px;

}

.prev {

  padding: 0 3px 0 0;

}

 

.MDJAminDiv {

  z-index: 4444;

  position: fixed;

  bottom: 5%;

  left: 2%;

}

 

.MDJAmin {

  text-decoration: none;

  border-bottom: 1px dashed rgb(44, 44, 44);

  border-top: 1px dashed rgb(44, 44, 44);

  padding: 4px 0;

  color: rgba(44, 44, 44, 0.525);

 

  font-family: monospace;

  font-style: italic;

  font-size: 1.1em;

  transition: all 0.5s;

}

 

.MDJAmin:hover {

  color: #000000;

}

 



JS 소스

"use strict";

 

let next = document.querySelector(".next");

let prev = document.querySelector(".prev");

 

next.addEventListener("click", function () {

  let items = document.querySelectorAll(".item");

  document.querySelector(".slide").appendChild(items[0]);

});

 

prev.addEventListener("click", function () {

  let items = document.querySelectorAll(".item");

  document.querySelector(".slide").prepend(items[items.length - 1]);

});

 

 

저작자표시 (새창열림)

'웹프로그램밍 자료실 > HTML 자료' 카테고리의 다른 글

[해피CGI][cgimall] Custom checkbox 커스텀 체크박스  (0) 2025.10.31
[해피CGI][cgimall] Modal Animations 다양한 모달 에니메이션 효과  (0) 2025.10.30
CSS를 이용한 3D 북 애니메이션 3D book  (0) 2025.10.02
[해피CGI][cgimall] 이미지 오버하면 변경되는 카드 뉴스 스타일 Player/User Cards  (0) 2025.10.01
[해피CGI][cgimall] 마우스 오버 패럴랙스 슬라이더(React Slider w/ Hover Effect)  (0) 2025.09.22
공유하기 링크
'웹프로그램밍 자료실/HTML 자료' Related Articles more
Comments