<div class="slider-container">
  <div class="slide">
    <h2>Airpods</h2>
    <h4>$199</h4>
    <video width="320" height="240" controls>
      <source src="https://player.vimeo.com/external/367564948.sd.mp4?s=d969af3ae466e775628a8d281105fd03a8df12ae&profile_id=165&oauth2_token_id=57447761" type="video/mp4"/>
      您的瀏覽器不支持視頻標(biāo)簽。
    </video>
    <a href="#" class="btn">Buy Now</a>
  </div>
  <div class="slide">
    <h2>iPhone 12</h2>
    <h4>$799</h4>
    <video width="320" height="240" controls>
      <source src="https://player.vimeo.com/external/334344435.sd.mp4?s=d367341a941ffa97781ade70e4f4a28f4a1a5fc8&profile_id=165&oauth2_token_id=57447761" type="video/mp4"/>
      您的瀏覽器不支持視頻標(biāo)簽。
    </video>
    <a href="#" class="btn">Buy Now</a>
  </div>
  <div class="slide">
    <h2>iPad</h2>
    <h4>$599</h4>
    <video width="320" height="240" controls>
      <source src="https://player.vimeo.com/external/369639344.sd.mp4?s=b892fce959245aa4ae7ab08bc4b1af2766acdf4e&profile_id=165&oauth2_token_id=57447761" type="video/mp4"/>
      您的瀏覽器不支持視頻標(biāo)簽。
    </video>
    <a href="#" class="btn">Buy Now</a>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  width: 100%;
  overflow: hidden; /* 防止頁面滾動 */
  background-color: #333;
  color: #fff;
  line-height: 1.7;
}

.slider-container {
  height: 100vh; /* 占據(jù)整個視口高度 */
  display: inline-flex; /* 允許所有滑塊并排顯示 */
  overflow: hidden; /* 隱藏超出容器的滑塊 */
  transform: translateX(0); /* 初始位置 */
  transition: transform 0.3s ease-out; /* 滑動動畫效果 */
  cursor: grab; /* 默認鼠標(biāo)樣式 */
}

.slide {
  max-height: 100vh;
  width: 100vw; /* 每個滑塊占據(jù)整個視口寬度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  user-select: none; /* 防止文本被選中 */
}

/* 關(guān)鍵調(diào)整：為視頻元素定義樣式 */
.slide video {
  max-width: 100%;
  max-height: 60%; /* 限制視頻最大高度 */
  transition: transform 0.3s ease-in-out; /* 拖拽時的縮放動畫 */
  object-fit: contain; /* 確保視頻內(nèi)容完整顯示 */
}

.slide h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.slide h4 {
  font-size: 1.3rem;
}

.btn {
  background-color: #444;
  color: #fff;
  text-decoration: none;
  padding: 1rem 1.5rem;
  margin-top: 1rem; /* 按鈕與視頻間距 */
}

.grabbing {
  cursor: grabbing; /* 拖拽時的鼠標(biāo)樣式 */
}

.grabbing .slide video { /* 關(guān)鍵調(diào)整：拖拽時視頻的縮放效果 */
  transform: scale(0.9);
}

const slider = document.querySelector('.slider-container');
const slides = Array.from(document.querySelectorAll('.slide'));

let isDragging = false,
  startPos = 0,
  currentTranslate = 0,
  prevTranslate = 0,
  animationID = 0,
  currentIndex = 0;

slides.forEach((slide, index) => {
  // 獲取視頻元素，并阻止其默認的拖拽行為
  const slideVideo = slide.querySelector('video');
  if (slideVideo) { // 確保視頻元素存在
    slideVideo.addEventListener('dragstart', (e) => e.preventDefault());
  }

  // 綁定觸摸事件
  slide.addEventListener('touchstart', touchStart(index));
  slide.addEventListener('touchend', touchEnd);
  slide.addEventListener('touchmove', touchMove);

  // 綁定鼠標(biāo)事件
  slide.addEventListener('mousedown', touchStart(index));
  slide.addEventListener('mouseup', touchEnd);
  slide.addEventListener('mouseleave', touchEnd); // 鼠標(biāo)離開時結(jié)束拖拽
  slide.addEventListener('mousemove', touchMove);
});

// 禁用右鍵菜單，防止干擾拖拽操作
window.oncontextmenu = function (event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
};

// 觸摸/鼠標(biāo)按下事件處理
function touchStart(index) {
  return function (event) {
    currentIndex = index;
    startPos = getPositionX(event); // 記錄起始X坐標(biāo)
    isDragging = true; // 設(shè)置拖拽狀態(tài)

    // 啟動動畫循環(huán)，實現(xiàn)平滑拖拽
    animationID = requestAnimationFrame(animation);
    slider.classList.add('grabbing'); // 添加拖拽時的鼠標(biāo)樣式
  };
}

// 觸摸/鼠標(biāo)抬起事件處理
function touchEnd() {
  isDragging = false; // 結(jié)束拖拽狀態(tài)
  cancelAnimationFrame(animationID); // 停止動畫循環(huán)

  const movedBy = currentTranslate - prevTranslate; // 計算移動距離

  // 根據(jù)移動距離判斷是否切換到下一張/上一張滑塊
  if (movedBy < -100 && currentIndex < slides.length - 1) {
    currentIndex += 1;
  }
  if (movedBy > 100 && currentIndex > 0) {
    currentIndex -= 1;
  }

  setPositionByIndex(); // 設(shè)置滑塊到最終位置
  slider.classList.remove('grabbing'); // 移除拖拽時的鼠標(biāo)樣式
}

// 觸摸/鼠標(biāo)移動事件處理
function touchMove(event) {
  if (isDragging) {
    const currentPosition = getPositionX(event);
    currentTranslate = prevTranslate + currentPosition - startPos; // 更新當(dāng)前平移量
  }
}

// 獲取事件的X坐標(biāo)（區(qū)分觸摸和鼠標(biāo)事件）
function getPositionX(event) {
  return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
}

// 動畫循環(huán)，持續(xù)更新滑塊位置
function animation() {
  setSliderPosition();
  if (isDragging) {
    requestAnimationFrame(animation);
  }
}

// 設(shè)置滑塊的CSS transform屬性
function setSliderPosition() {
  slider.style.transform = `translateX(${currentTranslate}px)`;
}

// 根據(jù)當(dāng)前索引設(shè)置滑塊位置
function setPositionByIndex() {
  currentTranslate = currentIndex * -window.innerWidth; // 計算目標(biāo)平移量
  prevTranslate = currentTranslate; // 更新上一個平移量
  setSliderPosition(); // 應(yīng)用位置
}