moviesDisplayed.map(movie => { return (<Carousel.Item key={movie.movId}> <a onClick={() => { let item = document.getElementById('mov' + movie.movId); if (item != null) item.scrollIntoView({block: 'center', behavior: 'smooth'}) }} className="click-icon"> <img src={movie.backdrop} alt={movie.name} className="carousel-image"/> </a> <Carousel.Caption> <h3>{movie.name}</h3> <p>{movie.name}</p> </Carousel.Caption> </Carousel.Item>) })
render() { const {setTab, tabIndex} = this.props; return ( <Grid> <Description /> <Tabs currTab={tabIndex} tabClick={(tabIndex) => setTab(tabIndex)} /> <hr/> <Carousel activeIndex={tabIndex} controls={false} direction={null} indicators={false}> <Carousel.Item> <SelectProducts /> </Carousel.Item> <Carousel.Item> <ContactBilling /> </Carousel.Item> </Carousel> <hr/> <LowerNav currTab={tabIndex} tabClick={(tabIndex) => setTab(tabIndex)} /> </Grid>); }
<CarouselWrap> <Carousel> <Carousel.Item> <img width={500} height={500} alt="First Kitten" src="https://placekitten.com/500/500" /> <Carousel.Caption> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img width={500} height={500} alt="Second kitten" src="https://placekitten.com/502/501" /> <Carousel.Caption> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img width={500} height={500} alt="Third kitten" src="https://placekitten.com/500/502" /> <Carousel.Caption> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </Carousel.Caption> </Carousel.Item> </Carousel> </CarouselWrap>