<img src="https://cdn.nugu.jp/public/251201_MUCENT.1-_01.jpg">
<style>
/* 슬라이더 기본 */
.simple-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
}

.simple-slider .track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.simple-slider .slide {
  min-width: 100%;
  user-select: none;
}

.simple-slider .slide img {
  width: 100%;
  height: 1000px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

@media (max-width: 768px) {
  .simple-slider .slide img {
    height: 600px;
  }
}

/* 도트 */
.simple-slider .dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 20;
}

.simple-slider .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
}

.simple-slider .dot.active {
  background: white;
  transform: none;
}
</style>
<div class="simple-slider" id="simpleSlider">
  <div class="track">
    <div class="slide"><img src="https://cdn.nugu.jp/public/251201_MUCENT.1-_02.jpg?q=100&amp;f=webp&amp;w=860" alt=""
        width="1000" height="1463"></div>
    <div class="slide"><img src="https://cdn.nugu.jp/public/251201_MUCENT.2-_02_HylsS2D.jpg?q=100&amp;f=webp&amp;w=860"
        alt=""></div>
    <div class="slide"><img src="https://cdn.nugu.jp/public/251201_MUCENT3.-_02.jpg?q=100&amp;f=webp&amp;w=860" alt="">
    </div>
  </div>
  <div class="dots"></div>
</div>
<script type="text/javascript">
(function(){
  const slider = document.getElementById('simpleSlider');
  const track = slider.querySelector('.track');
  const slides = Array.from(slider.querySelectorAll('.slide'));
  const dotsWrap = slider.querySelector('.dots');
  const slideCount = slides.length;

  let index = 0;
  let startX = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;
  let isDragging = false;
  let animationID = null;
  const autoPlayDelay = 2300;
  let autoPlayTimer = null;

  // 도트 생성
  slides.forEach((_, i) => {
    const dot = document.createElement('button');
    dot.className = 'dot' + (i === 0 ? ' active' : '');
    dot.addEventListener('click', () => {
      index = i;
      setPositionByIndex();
      resetAutoplay();
    });
    dotsWrap.appendChild(dot);
  });
  const dots = Array.from(dotsWrap.children);

  // 슬라이드 위치 설정
  function setPositionByIndex(){
    const width = slider.clientWidth;
    currentTranslate = -index * width;
    prevTranslate = currentTranslate;
    track.style.transition = 'transform 0.4s ease';
    track.style.transform = `translateX(${currentTranslate}px)`;
    updateDots();
  }

  function updateDots(){
    dots.forEach((dot,i) => dot.classList.toggle('active', i === index));
  }

  // 다음 슬라이드
  function nextSlide(){
    index = (index + 1) % slideCount;
    setPositionByIndex();
  }

  function startAutoplay(){
    stopAutoplay();
    autoPlayTimer = setInterval(nextSlide, autoPlayDelay);
  }

  function stopAutoplay(){
    if(autoPlayTimer){
      clearInterval(autoPlayTimer);
      autoPlayTimer = null;
    }
  }

  function resetAutoplay(){
    stopAutoplay();
    startAutoplay();
  }

  // 드래그 관련
  function getPositionX(e){
    return e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
  }

  function touchStart(e){
    isDragging = true;
    startX = getPositionX(e);
    animationID = requestAnimationFrame(animation);
    stopAutoplay();
    track.style.transition = 'none';
  }

  function touchMove(e){
    if(!isDragging) return;
    const x = getPositionX(e);
    currentTranslate = prevTranslate + (x - startX);
  }

  function touchEnd(){
    if(!isDragging) return;
    isDragging = false;
    cancelAnimationFrame(animationID);

    const width = slider.clientWidth;
    const moved = currentTranslate - prevTranslate;

    if(moved < -width * 0.2 && index < slideCount-1) index++;
    if(moved > width * 0.2 && index > 0) index--;

    setPositionByIndex();
    startAutoplay();
  }

  function animation(){
    track.style.transform = `translateX(${currentTranslate}px)`;
    if(isDragging) requestAnimationFrame(animation);
  }

  // 이벤트
  slides.forEach(slide => {
    slide.addEventListener('touchstart', touchStart);
    slide.addEventListener('touchmove', touchMove);
    slide.addEventListener('touchend', touchEnd);

    slide.addEventListener('mousedown', touchStart);
    slide.addEventListener('mousemove', touchMove);
    slide.addEventListener('mouseup', touchEnd);
    slide.addEventListener('mouseleave', touchEnd);

    const img = slide.querySelector('img');
    if(img) img.addEventListener('dragstart', e => e.preventDefault());
  });

  window.addEventListener('resize', setPositionByIndex);

  // 초기 실행
  setPositionByIndex();
  startAutoplay();
})();
</script>
<img src="https://cdn.nugu.jp/public/251201_MUCENT.1-_03.jpg"><img style="width: 100%;" alt="251201_MUCENT.-_04.jpg"
  src="https://cdn.nugu.jp/public/251201_MUCENT.-_04_S1W2cCi.jpg?q=100&amp;f=webp&amp;w=860">
<link rel="stylesheet" type="text/css" href="https://cdn.nugu.jp/public/promotion/wdpromotion.css">
<div class="wdpssSection">
  <ul class="wdpssImageSlide wdpssImageSlideCusom">
    <li><img src="https://cdn.nugu.jp/public/01_U6WSP9Q.jpg?q=100&amp;f=webp&amp;w=860"></li>
    <li><img src="https://cdn.nugu.jp/public/02_V2C1gcj.jpg?q=100&amp;f=webp&amp;w=860"></li>
    <li><img src="https://cdn.nugu.jp/public/03_h0CwvNK.jpg?q=100&amp;f=webp&amp;w=860"></li>
    <li><img src="https://cdn.nugu.jp/public/04_yKRJ9m2.jpg?q=100&amp;f=webp&amp;w=860"></li>
    <li><img src="https://cdn.nugu.jp/public/05_ssWaPy3.jpg?q=100&amp;f=webp&amp;w=860"></li>
    <li><img src="https://cdn.nugu.jp/public/06_qLQJkOW.jpg?q=100&amp;f=webp&amp;w=860"></li>
    <li><img src="https://cdn.nugu.jp/public/07_589p1g4.jpg?q=100&amp;f=webp&amp;w=860"></li>
    <li><img src="https://cdn.nugu.jp/public/08_aSz8xJh.jpg?q=100&amp;f=webp&amp;w=860"></li>
  </ul>
</div>
<style>
ul.wdpssImageSlide {padding: 60px 20px; background-color: #616161; display: flex; gap: 8px; overflow: scroll; scrollbar-width: none;}
ul.wdpssImageSlide::-webkit-scrollbar {display: none;}
ul.wdpssImageSlide li img {width: 100%;}
ul.wdpssImageSlideMax li {min-width: 100%;}

ul.wdpssImageSlideCusom {padding: 60px 20px; background-color: #3e3e3e; display: flex; gap: 8px; overflow: scroll; scrollbar-width: none;}
ul.wdpssImageSlideCusom li {min-width: 150px;}
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.nugu.jp/public/promotion/wdpromotion.css">
<div class="wdpssSection">
  <div class="wdpssSummary">
    <p class="body2 sb">PROMOTION</p>
    <p class="headline2 b">MUCENT 25AW COLLECTION<br>全品15%OFF</p>
    <p class="body2 m">2025.12.01 11:00 - 12.08 11:00</p>
  </div>
</div>

MUCENT
25AW COLLECTION

The Touch Of Silence

SIERRA LEOPARD HEART KNIT UNISEX

color

size

NELLO SNAP BUTTON LONG SLEEVE T (6Color)

MILIO LEOPARD CAMO LETTERING RAGLAN LONG

DOREN CAMO HOOD WINDBREAKER UNISEX

MUKE METAL LOGO HEART PATCH EYELET POINT ONE SHOULDER MTM

MUTE STRIPE MINI BACK PACK UNISEX

SAHARA LEOPARD CROSS KNIT UNISEX

NOYD METAL LOGO HEART PATCH KNIT HOOD ZIP-UP

LOVRITS MINI HEART LOGO U-NECK LONG SLEEVE T (4Color)

TOBV METAL LOGO HEART PATCH HIGH NECK SWEAT ZIP-UP (2Color)

KITT CROSS LETTERING ONE SHOULDER MTM

HUSTLE CROSS RIVET BALLOON FIT DENIM PANTS

MUTE METAL LOGO LEATHER MINI BACK PACK UNISEX

ARA METAL LOGO MINI SHOULDER BAG UNISEX

SIERRA LEOPARD HEART U-NECK LONG SLEEVE T (4Color)

VILE METAL LOGO HEART PATCH RIVET POINT OPS

OPEL METAL LOGO HOOD BOLERO

WAGON METAL LOGO HEART PATH EYELET DAMAGE KNIT

BYZE CRACK BACK 72 STRIPE COLLAR LONG SLEEVE T

SAHARA GRADATION LEOPARD CROSS SMALL LOGO MTM UNISEX (2Color)

MUCENT 25AW COLLECTION | ファッション通販サイト