带前后预览图的Carousel组件复刻：滑动功能及箭头失效求助

Hey there, let's break down what's likely going wrong with your carousel component and how to fix those missing arrows and broken sliding functionality.

First, let's tackle the missing arrows #

Arrows failing to show up usually boils down to three common issues:

• Mismatched or missing CSS: Double-check if you've copied over all the arrow-related styles from the original Codepen. For example, if the original uses classes like .carousel__prev and .carousel__next, make sure your CSS includes:

  .carousel__prev, .carousel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 12px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.2rem;
  }
  .carousel__prev { left: 15px; }
  .carousel__next { right: 15px; }
  

  Without positioning and visibility styles, arrows might be hidden under other elements or stuck in the normal document flow.
• Incorrect HTML structure: Verify that your arrow elements are nested correctly inside the carousel container. For example, the original might have:

  <div class="carousel">
    <button class="carousel__prev">←</button>
    <button class="carousel__next">→</button>
    <div class="carousel__slider">...</div>
  </div>
  

  If your arrows are outside the carousel container (which should have position: relative), their absolute positioning won't work as intended.
• Missing icon assets: If the original uses custom icons (SVG or font icons), ensure you've included those assets in your project. If you skip this, arrows might show up as empty boxes or not at all.

Next, fix the broken sliding functionality #

Sliding failures typically relate to incomplete JS logic or missing core CSS layout rules:

• Incomplete event listeners: The original Codepen's sliding is likely powered by native mouse/touch events. Make sure you've copied over all the relevant JavaScript, including:

  const slider = document.querySelector('.carousel__slider');
  let isDown = false;
  let startX;
  let scrollLeft;
  
  slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });
  
  slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
  });
  
  slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
  });
  
  slider.addEventListener('mousemove', (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 1.5; // Adjust scroll speed
    slider.scrollLeft = scrollLeft - walk;
  });
  

  If any of these events are missing, the slider won't register drag actions.
• Missing core CSS layout rules: The slider relies on specific layout properties to work. Ensure your CSS includes:

  .carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
  }
  
  .carousel__slider {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  .carousel__slide {
    scroll-snap-align: center;
    min-width: 80%; /* Adjust based on desired preview size */
  }
  

  Without overflow: hidden on the container or display: flex on the slider, the slides won't arrange horizontally, and sliding won't work.
• DOM loading order issues: If your JavaScript runs before the carousel elements are rendered (e.g., your script is in the <head> without a DOMContentLoaded listener), it won't be able to find the slider element. Wrap your JS code in:

  document.addEventListener('DOMContentLoaded', () => {
    // Your carousel logic here
  });
  

If you're still stuck, sharing your full HTML, CSS, and JavaScript code would help pinpoint the exact issue.

内容的提问来源于stack exchange，提问作者John Cedrick Agapito