如何在WordPress中实现类似Tinder的左右滑动图片浏览效果？

替代插件方案 #

• Swiper Slider：这款轻量滑块插件支持高度自定义，可通过添加自定义JS逻辑实现拖拽时的倾斜动画。安装插件后，在滑块配置中启用触摸交互，再通过自定义脚本监听拖拽位移，动态添加rotate()变换来模拟倾斜效果，适配性强且免费可用。
• Slider Revolution：付费插件，内置丰富的触摸交互动画预设。只需在滑块的“交互设置”中调整拖拽时的旋转角度、过渡曲线等参数，即可快速复现类似的倾斜滑动效果，适合不想编写代码的用户。

自定义代码实现（无需插件） #

如果追求完全定制化，可通过原生JS+CSS结合WordPress自定义字段实现：

1. 准备HTML结构 #

在作品集页面模板或自定义HTML区块中添加滑块容器：

<div class="tinder-slider">
  <!-- 循环输出作品集图片，可通过WordPress自定义字段/媒体库获取 -->
  <div class="slide"><img src="你的图片URL" alt="作品图"></div>
  <div class="slide"><img src="你的图片URL" alt="作品图"></div>
</div>

2. 添加CSS样式 #

将以下代码添加到主题的自定义CSS区域：

.tinder-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: grab;
}
.slide.dragging {
  cursor: grabbing;
}

3. 实现拖拽交互逻辑 #

将以下JS代码添加到主题的自定义JS区域或通过Code Snippets插件插入：

const slider = document.querySelector('.tinder-slider');
let slides = Array.from(slider.querySelectorAll('.slide'));
let isDragging = false;
let startX, startY, currentX, currentY;

slides.forEach(slide => {
  slide.addEventListener('mousedown', startDrag);
  slide.addEventListener('touchstart', startDrag);
});

document.addEventListener('mousemove', drag);
document.addEventListener('touchmove', drag);
document.addEventListener('mouseup', endDrag);
document.addEventListener('touchend', endDrag);

function startDrag(e) {
  isDragging = true;
  const touch = e.type === 'touchstart' ? e.touches[0] : e;
  startX = touch.clientX;
  startY = touch.clientY;
  this.classList.add('dragging');
}

function drag(e) {
  if (!isDragging) return;
  const touch = e.type === 'touchmove' ? e.touches[0] : e;
  currentX = touch.clientX - startX;
  currentY = touch.clientY - startY;
  
  const rotateAngle = (currentX / slider.offsetWidth) * 10; // 可调整倾斜角度系数
  slides[0].style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotateAngle}deg)`;
}

function endDrag() {
  if (!isDragging) return;
  isDragging = false;
  slides[0].classList.remove('dragging');
  
  // 滑动阈值判断，超出则移除当前图片
  const threshold = slider.offsetWidth * 0.3;
  if (Math.abs(currentX) > threshold) {
    slides[0].style.transform = `translate(${currentX > 0 ? '150%' : '-150%'}, ${currentY}px) rotate(${currentX > 0 ? 15 : -15}deg)`;
    setTimeout(() => {
      slider.removeChild(slides[0]);
      slides = slides.slice(1);
    }, 300);
  } else {
    slides[0].style.transform = 'translate(0, 0) rotate(0deg)';
  }
}

内容的提问来源于stack exchange，提问作者bigdev40