关于实现模态框滑块图片与对应描述同步切换的技术咨询

Hey there! I see what you're trying to do—right now you're rendering all your descriptions at once, which is why they're all showing up instead of matching the active slide. Let's fix this so your description updates automatically when the slider switches images.

Step 1: Add state to track the current slide index #

First, we need to keep track of which slide is active in your component's state. If this is a class component, add this to your constructor:

constructor(props) {
  super(props);
  // Initialize with the first slide as active
  this.state = {
    currentSlideIndex: 0
  };
}

Step 2: Hook into the slider's change event #

The AwesomeSlider component provides an onChange callback that fires when the slide changes. We'll use this to update our state with the current slide index:

<AwesomeSlider 
  cssModule={[AwesomeSliderStyles, AwesomeSliderStyles2]} 
  animation="scaleOutAnimation" 
  className="slider-image"
  // Update state whenever the slide changes
  onChange={(currentIndex) => this.setState({ currentSlideIndex: currentIndex })}
>
  {img}
</AwesomeSlider>

Step 3: Render only the active description #

Instead of rendering all your descriptions with {descr}, we'll pick the one that matches the current slide index. We'll also add a safety check to avoid errors if the description array is shorter than the images array:

Replace your existing {descr} line with this:

{description && description.length > this.state.currentSlideIndex && (
  <p className="modal-description">{description[this.state.currentSlideIndex]}</p>
)}

Step 4: Clean up your initial code (optional but recommended) #

You can tidy up your variable declarations to use const/let instead of var, and make the logic cleaner:

const { data } = this.props;
let img = [];
let description = [];

if (data) {
  const { images, description: descArray } = data;
  description = descArray;
  
  if (images) {
    img = images.map((elem, i) => (
      <div key={i} data-src={elem} />
    ));
  }
}

Full modified code snippet #

Putting it all together, your component's relevant sections will look like this:

constructor(props) {
  super(props);
  this.state = {
    currentSlideIndex: 0
  };
}

render() {
  const { title, url } = this.props.data || {};
  const { data } = this.props;
  let img = [];
  let description = [];

  if (data) {
    const { images, description: descArray } = data;
    description = descArray;
    
    if (images) {
      img = images.map((elem, i) => (
        <div key={i} data-src={elem} />
      ));
    }
  }

  return (
    <>
      <div>
        <AwesomeSlider 
          cssModule={[AwesomeSliderStyles, AwesomeSliderStyles2]} 
          animation="scaleOutAnimation" 
          className="slider-image"
          onChange={(currentIndex) => this.setState({ currentSlideIndex: currentIndex })}
        >
          {img}
        </AwesomeSlider>
      </div>
      <div className="col-md-10 mx-auto">
        <h3 style={{ padding: "5px 5px 0 5px" }}>
          {title} {url ? (
          <a href={url} target="_blank" rel="noopener noreferrer" className="link-href" >
            <i className="fas fa-external-link-alt" style={{ marginLeft: "10px" }} ></i>
          </a>
          ) : null}
        </h3>
        {/* Only render the description matching the active slide */}
        {description && description.length > this.state.currentSlideIndex && (
          <p className="modal-description">{description[this.state.currentSlideIndex]}</p>
        )}
      </div>
    </>
  );
}

This way, every time the user clicks the slider's left/right buttons, the onChange event updates the current slide index in state, and the description automatically switches to match the active image.

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