아임웹 카드 슬라이드 커스텀 코드 | 고급 카드 캐러셀 디자인 구현하기

 

카드 슬라이드가 필요한 이유

홈페이지 제작을 하다 보면 단순한 이미지 슬라이드보다 콘텐츠를 더 세련되게 보여주고 싶은 경우가 많습니다.

특히 교육기관, 병원, 법률사무소, 기업 홈페이지에서는 서비스 소개, 프로그램 안내, 포트폴리오, 강의 과정 등을

보기 좋게 정리하는 것이 중요합니다.

 

이번에 소개하는 코드는 카드가 중앙에 강조되어 보여지는 프리미엄 카드 슬라이더입니다.

좌우 이동 버튼과 자동 재생 기능이 포함되어 있으며, 활성화된 카드만 상세 내용이 펼쳐지는 인터랙션까지 구현되어 있습니다.

 

실제 구현 예시

믓아 스튜디오

---

 

이 코드로 구현되는 기능

✔ 중앙 카드 강조 효과

✔ 좌우 무한 슬라이드

✔ 자동 재생 기능

✔ 활성 카드만 상세 내용 표시

✔ 반응형 지원

✔ 카드 확대/축소 애니메이션

✔ 글래스모피즘 카드 디자인

✔ 교육 과정, 서비스 소개, 포트폴리오에 활용 가능

---

 

사용하면 좋은 상황

• 교육기관 홈페이지
• 강의 과정 소개
• 교육 프로그램 안내
• 세미나 일정 소개
• 병원 홈페이지
• 시술 프로그램 소개
• 진료 과목 소개
• 장비 소개
• 기업 홈페이지
• 서비스 소개
• 사업 영역 소개
• 프로젝트 포트폴리오
• 브랜드 홈페이지
• 제품 카테고리 소개
• 추천 상품 소개
• 브랜드 스토리 구성

---

 

적용 방법

STEP 1

-아임웹 관리자 접속

 

STEP 2

-코드를 넣을 섹션 선택

 

STEP 3

-코드 위젯 추가

 

STEP 4

-HTML / CSS / JS 전체 붙여넣기

 

STEP 5

-이미지 주소와 텍스트 수정

적용 완료

---

 

전체 코드

아래 코드를 그대로 복사하여 사용하면 됩니다.

<section class="msoa-course-slider" id="msoaCourseSlider">
  <button class="msoa-slider-btn msoa-prev" type="button">‹</button>
  <button class="msoa-slider-btn msoa-next" type="button">›</button>

  <div class="msoa-slider-head">
    <span>Featured Courses</span>
    <h2>Explore Our Programs</h2>
    <p>전문적인 커리큘럼을 감각적인 카드 슬라이드로 보여주세요.</p>
  </div>

  <div class="msoa-slider-viewport">
    <div class="msoa-slider-track">

      <article class="msoa-course-card" data-card="1">
        <div class="msoa-course-top"><span><strong>Seminars</strong><em>1 Units</em></span></div>
        <div class="msoa-course-inner">
          <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=1200" alt="">
          <h3>Course 1</h3>
          <div class="msoa-course-info">
            <strong>Module Overview</strong>
            <p>첫 번째 카드 설명 영역입니다.</p>
            <a href="#" class="msoa-course-btn">Explore Course</a>
          </div>
        </div>
      </article>

      <article class="msoa-course-card" data-card="2">
        <div class="msoa-course-top"><span><strong>Seminars</strong><em>2 Units</em></span></div>
        <div class="msoa-course-inner">
          <img src="https://images.unsplash.com/photo-1582750433449-648ed127bb54?q=80&w=1200" alt="">
          <h3>Course 2</h3>
          <div class="msoa-course-info">
            <strong>Module Overview</strong>
            <p>두 번째 카드 설명 영역입니다.</p>
            <a href="#" class="msoa-course-btn">Explore Course</a>
          </div>
        </div>
      </article>

      <article class="msoa-course-card" data-card="3">
        <div class="msoa-course-top"><span><strong>Seminars</strong><em>3 Units</em></span></div>
        <div class="msoa-course-inner">
          <img src="https://images.unsplash.com/photo-1606206873764-fd15e242df52?q=80&w=1200" alt="">
          <h3>Course 3</h3>
          <div class="msoa-course-info">
            <strong>Module Overview</strong>
            <p>세 번째 카드 설명 영역입니다.</p>
            <a href="#" class="msoa-course-btn">Explore Course</a>
          </div>
        </div>
      </article>

      <article class="msoa-course-card" data-card="4">
        <div class="msoa-course-top"><span><strong>Seminars</strong><em>4 Units</em></span></div>
        <div class="msoa-course-inner">
          <img src="https://images.unsplash.com/photo-1559757175-5700dde675bc?q=80&w=1200" alt="">
          <h3>Course 4</h3>
          <div class="msoa-course-info">
            <strong>Module Overview</strong>
            <p>네 번째 카드 설명 영역입니다.</p>
            <a href="#" class="msoa-course-btn">Explore Course</a>
          </div>
        </div>
      </article>

      <article class="msoa-course-card" data-card="5">
        <div class="msoa-course-top"><span><strong>Seminars</strong><em>5 Units</em></span></div>
        <div class="msoa-course-inner">
          <img src="https://images.unsplash.com/photo-1544027993-37dbfe43562a?q=80&w=1200" alt="">
          <h3>Course 5</h3>
          <div class="msoa-course-info">
            <strong>Module Overview</strong>
            <p>다섯 번째 카드 설명 영역입니다.</p>
            <a href="#" class="msoa-course-btn">Explore Course</a>
          </div>
        </div>
      </article>

      <article class="msoa-course-card" data-card="6">
        <div class="msoa-course-top"><span><strong>Seminars</strong><em>6 Units</em></span></div>
        <div class="msoa-course-inner">
          <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=1200" alt="">
          <h3>Course 6</h3>
          <div class="msoa-course-info">
            <strong>Module Overview</strong>
            <p>여섯 번째 카드 설명 영역입니다.</p>
            <a href="#" class="msoa-course-btn">Explore Course</a>
          </div>
        </div>
      </article>

      <article class="msoa-course-card" data-card="7">
        <div class="msoa-course-top"><span><strong>Seminars</strong><em>7 Units</em></span></div>
        <div class="msoa-course-inner">
          <img src="https://images.unsplash.com/photo-1559757175-5700dde675bc?q=80&w=1200" alt="">
          <h3>Course 7</h3>
          <div class="msoa-course-info">
            <strong>Module Overview</strong>
            <p>일곱 번째 카드 설명 영역입니다.</p>
            <a href="#" class="msoa-course-btn">Explore Course</a>
          </div>
        </div>
      </article>

      <article class="msoa-course-card" data-card="8">
        <div class="msoa-course-top"><span><strong>Seminars</strong><em>8 Units</em></span></div>
        <div class="msoa-course-inner">
          <img src="https://images.unsplash.com/photo-1582750433449-648ed127bb54?q=80&w=1200" alt="">
          <h3>Course 8</h3>
          <div class="msoa-course-info">
            <strong>Module Overview</strong>
            <p>여덟 번째 카드 설명 영역입니다.</p>
            <a href="#" class="msoa-course-btn">Explore Course</a>
          </div>
        </div>
      </article>

    </div>
  </div>
</section>

<style>
#msoaCourseSlider,
#msoaCourseSlider *{
  box-sizing:border-box;
  font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif !important;
}

#msoaCourseSlider{
  position:relative;
  width:100%;
  padding:110px 0 150px;
  overflow-x:hidden;
  overflow-y:visible;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.95), transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(190,210,255,.45), transparent 34%),
    linear-gradient(135deg,#f5f5f2 0%,#e8e9ec 100%);
}

#msoaCourseSlider:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.35;
  pointer-events:none;
}

#msoaCourseSlider .msoa-slider-head{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto 52px;
  padding:0 24px;
}

#msoaCourseSlider .msoa-slider-head span{
  display:inline-flex;
  padding:9px 16px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(14px);
  font-size:13px;
  font-weight:700;
  color:#555;
}

#msoaCourseSlider .msoa-slider-head h2{
  margin:18px 0 10px;
  font-size:clamp(38px,5vw,72px);
  line-height:.95;
  letter-spacing:-.06em;
  color:#111;
}

#msoaCourseSlider .msoa-slider-head p{
  margin:0;
  font-size:17px;
  color:#666;
}

#msoaCourseSlider .msoa-slider-viewport{
  position:relative;
  z-index:2;
  width:100%;
  height:720px;
  overflow-x:hidden;
  overflow-y:visible;
}

#msoaCourseSlider .msoa-slider-track{
  display:flex;
  align-items:flex-start;
  gap:34px;
  height:720px;
  will-change:transform;
  padding:20px 0 100px;
}

#msoaCourseSlider .msoa-course-card{
  flex:0 0 430px;
  opacity:.38;
  transform:scale(.92);
  transform-origin:center top;
  transition:opacity .35s ease, transform .35s ease, filter .35s ease;
  filter:grayscale(.2);
}

#msoaCourseSlider .msoa-course-card.active{
  opacity:1;
  transform:scale(1);
  filter:none;
}

#msoaCourseSlider .msoa-course-top{
  margin-bottom:12px;
}

#msoaCourseSlider .msoa-course-top span{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:12px 16px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.85);
  border-radius:999px;
  backdrop-filter:blur(18px);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  font-size:13px;
  color:#111;
}

#msoaCourseSlider .msoa-course-top em{
  font-style:normal;
  color:#777;
}

#msoaCourseSlider .msoa-course-inner{
  position:relative;
  overflow:hidden;
  height:auto;
  min-height:540px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.9);
  border-radius:32px;
  padding:14px;
  box-shadow:0 28px 70px rgba(0,0,0,.12);
  backdrop-filter:blur(20px);
}

#msoaCourseSlider .msoa-course-inner img{
  width:100%;
  height:340px;
  object-fit:cover;
  border-radius:22px;
  display:block;
  filter:saturate(1.05) contrast(1.02);
}

#msoaCourseSlider .msoa-course-inner h3{
  margin:20px 4px 0;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:800;
  color:#111;
}

#msoaCourseSlider .msoa-course-info{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin:0 4px;
  transition:max-height .35s ease, opacity .35s ease, margin .35s ease;
}

#msoaCourseSlider .msoa-course-card.active .msoa-course-info{
  max-height:220px;
  opacity:1;
  margin-top:22px;
}

#msoaCourseSlider .msoa-course-info strong{
  display:block;
  margin-bottom:10px;
  color:#888;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

#msoaCourseSlider .msoa-course-info p{
  margin:0 0 22px;
  color:#333;
  line-height:1.65;
  font-size:15px;
}

#msoaCourseSlider .msoa-course-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  background:#111;
  color:#fff !important;
  text-decoration:none;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  transition:transform .25s ease, background .25s ease;
}

#msoaCourseSlider .msoa-course-btn:hover{
  transform:translateY(-2px);
  background:#2f5cff;
}

#msoaCourseSlider .msoa-slider-btn{
  position:absolute;
  top:58%;
  z-index:999;
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:rgba(17,17,17,.82);
  backdrop-filter:blur(14px);
  color:#fff;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  box-shadow:0 18px 38px rgba(0,0,0,.2);
  transition:transform .25s ease, background .25s ease;
}

#msoaCourseSlider .msoa-slider-btn:hover{
  background:#2f5cff;
  transform:translateY(-50%) scale(1.08);
}

#msoaCourseSlider .msoa-prev{left:32px;}
#msoaCourseSlider .msoa-next{right:32px;}

@media(max-width:768px){
  #msoaCourseSlider{
    padding:76px 0 120px;
  }

  #msoaCourseSlider .msoa-slider-head{
    margin-bottom:34px;
  }

  #msoaCourseSlider .msoa-slider-head h2{
    font-size:42px;
  }

  #msoaCourseSlider .msoa-slider-head p{
    font-size:15px;
  }

  #msoaCourseSlider .msoa-slider-viewport{
    height:650px;
    overflow-x:hidden;
    overflow-y:visible;
  }

  #msoaCourseSlider .msoa-slider-track{
    gap:20px;
    height:650px;
    padding:20px 0 100px;
  }

  #msoaCourseSlider .msoa-course-card{
    flex:0 0 84vw;
  }

  #msoaCourseSlider .msoa-course-inner{
    min-height:500px;
    border-radius:26px;
  }

  #msoaCourseSlider .msoa-course-inner img{
    height:260px;
    border-radius:18px;
  }

  #msoaCourseSlider .msoa-course-inner h3{
    font-size:25px;
  }

  #msoaCourseSlider .msoa-course-card.active .msoa-course-info{
    max-height:240px;
  }

  #msoaCourseSlider .msoa-slider-btn{
    width:44px;
    height:44px;
    font-size:27px;
  }

  #msoaCourseSlider .msoa-prev{left:12px;}
  #msoaCourseSlider .msoa-next{right:12px;}
}
</style>

<script>
(function(){
  const slider = document.querySelector("#msoaCourseSlider");
  if(!slider) return;

  const track = slider.querySelector(".msoa-slider-track");
  const prevBtn = slider.querySelector(".msoa-prev");
  const nextBtn = slider.querySelector(".msoa-next");

  const originalCards = Array.from(track.querySelectorAll(".msoa-course-card"));
  const order = [6,7,8,1,2,3,4,5];
  const cardMap = {};

  originalCards.forEach(function(card){
    cardMap[Number(card.dataset.card)] = card;
  });

  track.innerHTML = "";

  for(let i = 0; i < 5; i++){
    order.forEach(function(num){
      const clone = cardMap[num].cloneNode(true);
      track.appendChild(clone);
    });
  }

  const cards = Array.from(track.querySelectorAll(".msoa-course-card"));
  const total = order.length;

  let currentIndex = total * 2 + 3;
  let isMoving = false;
  let autoTimer = null;

  function getGap(){
    return parseInt(window.getComputedStyle(track).gap) || 0;
  }

  function getCardWidth(){
    return cards[0].offsetWidth + getGap();
  }

  function getCenterOffset(){
    return (slider.offsetWidth - cards[0].offsetWidth) / 2;
  }

  function setActive(){
    cards.forEach(function(card){
      card.classList.remove("active");
    });

    if(cards[currentIndex]){
      cards[currentIndex].classList.add("active");
    }
  }

  function applyMove(smooth){
    track.style.transition = smooth ? "transform .7s cubic-bezier(.22,.61,.36,1)" : "none";
    track.style.transform = "translate3d(" + (-((getCardWidth() * currentIndex) - getCenterOffset())) + "px,0,0)";
    setActive();
  }

  function normalize(){
    const activeNum = Number(cards[currentIndex].dataset.card);
    currentIndex = total * 2 + order.indexOf(activeNum);
    applyMove(false);
  }

  function moveTo(index, smooth){
    if(isMoving) return;

    isMoving = true;
    currentIndex = index;
    applyMove(smooth);

    setTimeout(function(){
      if(currentIndex >= total * 4 || currentIndex < total){
        normalize();
      }

      isMoving = false;
    }, smooth ? 750 : 0);
  }

  function nextSlide(){
    moveTo(currentIndex + 1, true);
  }

  function prevSlide(){
    moveTo(currentIndex - 1, true);
  }

  function startAuto(){
    stopAuto();
    autoTimer = setInterval(function(){
      nextSlide();
    }, 3000);
  }

  function stopAuto(){
    if(autoTimer){
      clearInterval(autoTimer);
      autoTimer = null;
    }
  }

  nextBtn.addEventListener("click", function(){
    nextSlide();
    startAuto();
  });

  prevBtn.addEventListener("click", function(){
    prevSlide();
    startAuto();
  });

  window.addEventListener("resize", function(){
    applyMove(false);
  });

  document.addEventListener("visibilitychange", function(){
    if(document.hidden){
      stopAuto();
    }else{
      startAuto();
    }
  });

  setTimeout(function(){
    applyMove(false);
    startAuto();
  }, 100);
})();
</script>

---

 

수정 가능한 부분

1. 카드 제목 변경

<h3>Course 1</h3>

↓

<h3>브랜드 전략 과정</h3>

 

 

2. 카드 설명 변경

<p>첫 번째 카드 설명 영역입니다.</p>

↓

원하는 설명 문구 입력

---

3. 버튼 텍스트 변경

Explore Course

↓

자세히 보기

 

 

4. 이미지 변경

<img src="이미지주소">

부분의 이미지 URL만 교체하면 됩니다.

 

5. 자동 슬라이드 속도 변경

현재 설정

}, 3000);

3000 = 3초

예시

}, 5000);

5초 간격으로 변경

 

6. 카드 크기 변경

현재 설정

flex:0 0 430px;

430px 값을 변경하면 카드 너비를 조절할 수 있습니다.

---

 

자주 발생하는 오류와 해결 방법

1. 슬라이더가 움직이지 않는 경우

원인 : JS 코드가 누락되었거나 삭제됨

해결 : HTML / CSS / JS 전체를 함께 넣어주세요.

 

2. 이미지가 표시되지 않는 경우

원인 : 이미지 URL 오류

해결 : 외부 이미지 주소가 정상인지 확인합니다.

 

3. 모바일에서 카드가 잘리는 경우

원인 : 부모 섹션 overflow 설정 충돌

해결 : 아임웹 섹션 설정을 확인하거나 기본 overflow 값을 사용합니다.

 

4. 버튼이 클릭되지 않는 경우

원인 : 다른 요소가 버튼 위를 덮고 있음

해결 : z-index 값을 높여주세요.

---

 

코드의 특징

일반적인 슬라이더와 다르게 중앙 카드만 강조되고 상세 내용이 자연스럽게 펼쳐집니다.

또한 무한 루프 구조를 적용하여 사용자가 마지막 카드에 도달해도 끊김 없이 계속 탐색할 수 있습니다.

교육기관, 병원, 기업 홈페이지에서 자주 사용하는 고급 웹디자인 패턴으로 활용도가 높은 커스텀 코드입니다.

아임웹 기본 슬라이드만으로는 구현하기 어려운 인터랙션을 HTML/CSS/JS 조합으로 구현한 예제입니다.

---

 

 

홈페이지 제작에서 콘텐츠를 어떻게 보여주느냐는 디자인 퀄리티를 결정하는 중요한 요소입니다.

이번 카드 슬라이더는 단순한 이미지 나열이 아닌, 사용자의 시선을 자연스럽게 유도하는 구조로 설계되어 있습니다.

아임웹 커스텀 코드로 조금 더 완성도 높은 홈페이지를 만들고 싶다면 활용해 보시기 바랍니다.

 

홈페이지 상담문의

믓아 스튜디오