Карусель с несколькими изображениями работает довольно хорошо, но я бы хотел добавить обработчик события onClick для каждого изображения в карусели и отобразить его в верхней части карусели, чтобы он работал только для 1-го элемента каждого слайда, а не для оставшихся элементов в активном слайде.
Я реализовал это, настроив карусель из нескольких изображений. Посмотрите код ниже.
interface imgprops {
AdListItem: any;
}
class Imageslide extends Component<imgprops, any> {
constructor(props: any) {
super(props);
this.state = { imgsrc: this.props.AdListItem[0].src };
}
componentDidMount() {
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
}
public DisplayImage(details: any) {
debugger;
this.setState(
this.state = { imgsrc: details.src }
);
console.log(this.state);
}
render() {
debugger;
return (
<div className="ms-Grid-row">
<div className="card">
<div className='ProdImgView'>
<img src={this.state.imgsrc} alt="avengers" className='prodimg' />
<div className="prodprize">
<p className="card-prize"><i className="fas fa-rupee-sign"></i>{this.props.AdListItem.prize}</p>
</div>
</div>
</div>
<div className="ms-Grid-col ms-sm6 ms-md4 ms-lg12 ImageslideMainDiv">
<div className="carousel slide multi-item-carousel" id="theCarousel">
<div className="carousel-inner">
<div className="item active">
<div className="ms-Grid-col ms-sm3"><img src={this.props.AdListItem[0].src} className="img-responsive" onClick={() => { debugger; this.DisplayImage(this.props.AdListItem[0]) }} /></div>
</div>
{this.props.AdListItem.map((items: any) =>
<div className="item">
<div className="ms-Grid-col ms-sm3"><img src={items.src} className="img-responsive" onClick={() => { debugger; this.DisplayImage(items) }} /></div>
</div>
)}
</div>
<a href="#theCarousel" className="left carousel-control left" data-slide="prev">
<i className="fas fa-chevron-left ChevronIcon"></i>
</a>
<a href="#theCarousel" className="right carousel-control right" data-slide="next">
<i className="fas fa-chevron-right ChevronIcon"></i>
</a>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state: any) {
return {
AdListItem: state.AdList
};
}
export default connect(mapStateToProps, undefined)(Imageslide);
Я хочу визуализировать каждый элемент, который нажимается на вершину карусели.
но только каждый 1-й элемент карусели работает правильно, кто-то может понять это для меня.