1
저는 반응과 부트 스트랩에 꽤 새로운 것 같습니다. 일부 부트 스트랩 캐 러셀 소스 코드를 선택하여 내 reactjs 앱에서 구현하려고했습니다. 문제는 다음 및 이전 버튼이 응답하지 않는다는 것입니다. 또한, th 이미지는 자동으로 변경되지 않습니다.회전식 전환이 응답하지 않습니다.
import React from 'react';
import img1 from '../images/img1.jpg';
import img2 from '../images/img2.jpg';
import img3 from '../images/img3.jpg';
import img4 from '../images/img4.jpg';
import 'bootstrap/dist/css/bootstrap.css';
const ImageShow = ({imagesData}) => {
const { caption1,caption2, caption3, caption4 } = imagesData;
console.log(img1);
return(
<div id="myCarousel" className="carousel slide" data-ride="carousel">
{/* indicators */}
<ol className="carousel-indicators" role="listbox">
<li data-target='#myCarousel' data-slide-to="0" className="active"></li>
<li data-target='#myCarousel' data-slide-to="1" ></li>
<li data-target='#myCarousel' data-slide-to="2" ></li>
<li data-target='#myCarousel' data-slide-to="3" ></li>
</ol>
{/* wrapper for slides */}
<div className="carousel-inner">
<div className="imageWidth item active">
<img src={img1} alt={caption1} />
</div>
<div className="imageWidth item">
<img src={img2} alt={caption2} />
</div>
<div className="imageWidth item">
<img src={img3} alt={caption3} />
</div>
<div className="imageWidth item">
<img src={img4} alt={caption4} />
</div>
</div>
{/* left and right controls */}
<a className="left carousel-control" href="#myCarousel" data-slide="prev">
<span className="glyphicon glyphicon-chevron-left"></span>
<span className="sr-only">Previous</span>
</a>
<a className="right carousel-control" href="#myCarousel" data-slide="next">
<span className="glyphicon glyphicon-chevron-right"></span>
<span className="sr-only">Next</span>
</a>
</div>);
}
export default ImageShow;
내 반응 앱에서 클릭 이벤트를 작동 시키려면 어떻게해야합니까?
참고 : ''은 닫는 슬래시를 사용하지 않거나 필요하지 않습니다. – Rob