html 我想更改另一个div中的项目描述(引导程序轮播)

jtjikinw  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(128)

我使用map方法渲染了所有的图像,我想做的是跟踪当前的图像索引,这样我就可以更改位于另一个div中的项目描述,或者您可以为我提供另一个解决方案。
应用程序. js:

import Carousel from 'react-bootstrap/Carousel';
import './style.css'
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { useState } from 'react';

function App(props) {
 
  return (
    <Container>
      <Row>
        <Col>
        <Carousel className='mycarousel'>
      {
        props.adem.map((element)=>(
         <Carousel.Item key={element.id} id={element.id}>
      <img
        className="myImage"
        src={element.images.url[0]}
        alt="First slide"
      />
      
      
         </Carousel.Item>
     ))
    }
    </Carousel>
        </Col>

        <Col>
        
        </Col>
      </Row>
      </Container>
    

       
    
  
  
  );
}

export default App;

正如你所看到的,Map方法渲染图像,但我想显示在一个单独的列,而不是在幻灯片内的项目说明。

0qx6xfy6

0qx6xfy61#

您是否尝试过使用Carousel元素的activeIndex属性来有条件地呈现描述?
您可以通过阅读activeIndex属性来获取当前可见卡片的索引,然后检查activeIndex ===卡片索引并呈现相应的描述。
希望这对你有帮助

相关问题