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>); }
render() { const { imageUrls, width, height, ...carouselProps } = this.props; const carouselItems = imageUrls.map((imageUrl, index) => { const imageBackground = { width: width, height: height, backgroundImage: `url(${'/'+imageUrl})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center' }; return ( <CarouselItem key={index} onClick={this.props.onItemSelect&&(()=>this.props.onItemSelect(index))}> <div style={imageBackground}/> </CarouselItem> ); }); return ( <Carousel {...carouselProps} controls={imageUrls&&imageUrls.length>1}> {carouselItems} </Carousel> ); }
<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" /> <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" /> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </Carousel.Caption> </Carousel.Item> </Carousel> </CarouselWrap>
</Carousel.Caption> </a> </Carousel.Item>