I'm trying to control a Carousel from Links in a NavBar. What I have right now is a click method in the HomePage component (the parent component of both the NavBar and Carousel) that updates the state of the currently selected index based on which link is clicked in the NavBar. I have zero clue on what to do to get the Carousel to listen to the index state and move the slides after a Link is pressed. When I initially had the activeIndex set, I couldn't get it to properly listen to the index passed as a prop and the onSelect handler also was basically doing nothing.
Update: HomePage => just added direction to the state to reflect the changes of update v2 in the carousel below.
class HomePage extends Component {
constructor(props){
super(props);
this.state = {index: '0', direction: null};
}
handleclick = (i) => {
this.setState({direction: (this.state.index>i) ? 'prev':'next', index: i});
}
render() {
return (
<Container className='containerCustom d-flex h-100 w-100' fluid>
<Row className='fullscreen-bg h-100 w-100'>
<video loop autoPlay className='fullscreen-bg_video w-100 h-100'>
<source src={background} type='video/mp4'/>
</video>
</Row>
<Row className='flex-fill w-100 navrow' noGutters>
<Col className='navCol'>
<NavBar handleClick={this.handleclick}/>
</Col>
<Col className='carCol d-flex h-100'>
<VCarousel index={this.state.index} direction={this.state.direction}/>
</Col>
</Row>
</Container>
)
}
}export default HomePage;
NavBar
const NavBar = (props) => {
const onSelect = eventKey => {props.handleClick(eventKey)};
return (
<Nav className='ribbon flex-column h-100 nav-justified' fill onSelect={onSelect}>
<Item className='flex-column header nav-fill'>
<Item><Image className='profpic' src={profpic} roundedCircle/></Item><br></br>
<Item>Logo</Item>
<Item id='name'>Name</Item>
<Item id='contact'>Contact 1</Item>
<Item id='contact'>Contact 2</Item>
</Item>
<Item className='flex-column carousel-links'>
<Link eventKey={0}>Blogs</Link>
<Link eventKey={1}>About</Link>
<Link eventKey={2}>Past Projects</Link>
<Link eventKey={3}>Current Projects</Link>
</Item>
</Nav>
)
}
export default NavBar;
Update V1: Carousel => This version just puts "active" classname conditionally, but this kills the CSS animations since the conditionals don't add them. I'm not sure how to add them temporarily or put the transition in the way react bootstrap has it when you control it normally through indicators or arrows.
const VCarousel = (props) => {
const index = props.index;
return(
<Carousel id='vCarousel' className='w-100 h-100 d-flex vert' interval={null} controls={false} indicators={true} touch={false} keyboard={false}>
<Item id='blank' className={'h-100' + (index == 0 ? ' active':'')}>
<Container className='w-100 h-100 d-flex'>
</Container>
</Item>
<Item className={'h-100' + (index == 1 ? ' active':'')}>
<Container className='info-container'>
<h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>About Me</b></h1>
<div className='about-body'>
<p></p>
</div>
</Container>
</Item>
<Item className={'h-100' + (index == 2 ? ' active':'')}>
<Container className='info-container'>
<h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Past Projects</b></h1>
<div className='about-body'>
<p></p>
</div>
</Container>
</Item>
<Item className={'h-100' + (index == 3 ? ' active':'')}>
<Container className='info-container'>
<h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Current Projects</b></h1>
<div className='about-body'>
<p></p>
</div>
</Container>
</Item>
</Carousel>
)
}
export default VCarousel;
Update V2: Carousel => This version attempts to use the documentations version of controlled carousel but I'm not sure what to put for direction and onSelect. The animations are also messed up - for some reason carousel-item-left (or right) get applied twice and then previous or next slide doesn't get any className added onto it for the animation to properly slide away (instead of disappearing outright) I have a CSS file that changes the animations of the carousel to be vertical but I'm not sure what to do at this point. I also don't know what to do with the onSelect part.
const VCarousel = (props) => {
//this part is unused because it doesn't work. activeIndex right now is just using props.index because I don't know how to implement onSelect here
const [index, setIndex] = useState(0);
const [direction, setDirection] = useState(null);
const handleSelect = (selectedIndex, e) => {
setIndex({index: props.index});
setDirection({direction: props.direction});
}
return(
<Carousel id='vCarousel' className='w-100 h-100 d-flex vert' activeIndex={props.index} direction={direction} onSelect={handleSelect}
interval={null} controls={false} indicators={true} touch={false} keyboard={false}>
<Item id='blank' className={'h-100'}>
<Container className='w-100 h-100 d-flex'>
</Container>
</Item>
<Item className={'h-100'}>
<Container className='info-container'>
<h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>About Me</b></h1>
<div className='about-body'>
<p></p>
</div>
</Container>
</Item>
<Item className={'h-100'}>
<Container className='info-container'>
<h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Past Projects</b></h1>
<div className='about-body'>
<p></p>
</div>
</Container>
</Item>
<Item className={'h-100'}>
<Container className='info-container'>
<h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Current Projects</b></h1>
<div className='about-body'>
<p></p>
</div>
</Container>
</Item>
</Carousel>
)
}
export default VCarousel;
CSS for Carousel:
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.vert .carousel-item-next,
.vert .active.carousel-item-right {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
-moz-transform: translate3d(0,-100%, 0);
transform: translate3d(0,-100%, 0);
}
