Shopifyの画像Before Afterスライダーアプリ5選

<div class="ba-slider-section">
  <h2 class="ba-slider-title">{{ section.settings.title }}</h2>
  <div class="ba-slider-container" id="ba-slider-{{ section.id }}">
    <div class="ba-slider-image ba-slider-after">
      <img src="{{ section.settings.after_image | image_url: width: 1200 }}" alt="After" loading="lazy">
      <span class="ba-slider-label ba-label-after">{{ section.settings.after_label | default: 'After' }}</span>
    </div>
    <div class="ba-slider-image ba-slider-before">
      <img src="{{ section.settings.before_image | image_url: width: 1200 }}" alt="Before" loading="lazy">
      <span class="ba-slider-label ba-label-before">{{ section.settings.before_label | default: 'Before' }}</span>
    </div>
    <div class="ba-slider-handle">
      <div class="ba-slider-line"></div>
      <div class="ba-slider-circle">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </div>
      <div class="ba-slider-line"></div>
    </div>
    <input type="range" class="ba-slider-range" min="0" max="100" value="50" aria-label="Before After Slider">
  </div>
</div>

<style>
  .ba-slider-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 16px;
  }

  .ba-slider-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
  }

  .ba-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
  }

  .ba-slider-image img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  .ba-slider-after {
    position: relative;
    width: 100%;
  }

  .ba-slider-before {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
  }

  .ba-slider-before img {
    width: 200%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }

  .ba-slider-label {
    position: absolute;
    bottom: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    z-index: 5;
    pointer-events: none;
  }

  .ba-label-before {
    left: 12px;
  }

  .ba-label-after {
    right: 12px;
  }

  .ba-slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .ba-slider-line {
    flex: 1;
    width: 3px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  .ba-slider-circle {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    color: #333;
    flex-shrink: 0;
  }

  .ba-slider-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 4;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
  }

  .ba-slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 44px;
    height: 100%;
    cursor: ew-resize;
  }

  @media (max-width: 768px) {
    .ba-slider-section {
      margin: 24px auto;
    }

    .ba-slider-circle {
      width: 36px;
      height: 36px;
    }

    .ba-slider-circle svg {
      width: 18px;
      height: 18px;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const containers = document.querySelectorAll('.ba-slider-container');

    containers.forEach(function (container) {
      const rangeInput = container.querySelector('.ba-slider-range');
      const beforeLayer = container.querySelector('.ba-slider-before');
      const handle = container.querySelector('.ba-slider-handle');

      function updateSlider(value) {
        const percentage = value + '%';
        beforeLayer.style.width = percentage;
        handle.style.left = percentage;
      }

      // range input によるスライダー操作
      rangeInput.addEventListener('input', function () {
        updateSlider(this.value);
      });

      // ドラッグ操作対応
      let isDragging = false;

      function getPositionX(e) {
        if (e.touches && e.touches.length > 0) {
          return e.touches[0].clientX;
        }
        return e.clientX;
      }

      function handleMove(e) {
        if (!isDragging) return;
        e.preventDefault();

        const rect = container.getBoundingClientRect();
        const x = getPositionX(e) - rect.left;
        const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));

        rangeInput.value = percentage;
        updateSlider(percentage);
      }

      function startDrag(e) {
        isDragging = true;
        handleMove(e);
      }

      function stopDrag() {
        isDragging = false;
      }

      // マウスイベント
      container.addEventListener('mousedown', startDrag);
      document.addEventListener('mousemove', handleMove);
      document.addEventListener('mouseup', stopDrag);

      // タッチイベント
      container.addEventListener('touchstart', startDrag, { passive: false });
      document.addEventListener('touchmove', handleMove, { passive: false });
      document.addEventListener('touchend', stopDrag);

      // 初期表示
      updateSlider(50);
    });
  });
</script>

{% schema %}
{
  "name": "Before/After Slider",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "セクションタイトル",
      "default": "ビフォーアフター"
    },
    {
      "type": "image_picker",
      "id": "before_image",
      "label": "Before 画像"
    },
    {
      "type": "image_picker",
      "id": "after_image",
      "label": "After 画像"
    },
    {
      "type": "text",
      "id": "before_label",
      "label": "Before ラベル",
      "default": "Before"
    },
    {
      "type": "text",
      "id": "after_label",
      "label": "After ラベル",
      "default": "After"
    }
  ],
  "presets": [
    {
      "name": "Before/After Slider"
    }
  ]
}
{% endschema %}