Skip to content

Instantly share code, notes, and snippets.

@asalem1
Last active March 14, 2021 06:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save asalem1/d532ac4cd892794fe518a4fdb892e3eb to your computer and use it in GitHub Desktop.
Save asalem1/d532ac4cd892794fe518a4fdb892e3eb to your computer and use it in GitHub Desktop.
React Coverflow Example 3
import React from 'react';
import ReactDOM from 'react-dom';
import Coverflow from 'react-coverflow';
class Container extends Component {
constructor(props) {
super(props);
this.state = {
active: 0
};
}
render() {
return (
<div>
<button onClick={this._handleClick.bind(this)}>Radom</button>
<Coverflow
width={960}
height={480}
displayQuantityOfSide={2}
navigation={true}
enableHeading={false}
active={this.state.active}
>
<div
onClick={() => fn()}
onKeyDown={() => fn()}
role="menuitem"
tabIndex="0"
>
<img src='images/album-1.png' alt='Album one' />
</div>
<img src='images/album-2.png' alt='Album two' data-action="http://passer.cc"/>
<img src='images/album-3.png' alt='Album three' data-action="https://doce.cc/"/>
<img src='images/album-4.png' alt='Album four' data-action="http://tw.yahoo.com"/>
<img src='images/album-5.png' alt='Album five' data-action="http://www.bbc.co.uk"/>
<img src='images/album-6.png' alt='Album six' data-action="https://medium.com"/>
<img src='images/album-7.png' alt='Album seven' data-action="http://www.google.com"/>
<img src='images/album-1.png' alt='Album one' data-action="https://facebook.github.io/react/"/>
<img src='images/album-2.png' alt='Album two' data-action="http://passer.cc"/>
<img src='images/album-3.png' alt='Album three' data-action="https://doce.cc/"/>
<img src='images/album-4.png' alt='Album four' data-action="http://tw.yahoo.com"/>
</Coverflow>
</div>
);
}
_handleClick() {
var num = Math.floor((Math.random() * 10) + 1);
this.setState({
active: num
});
}
};
ReactDOM.render(
<Container></Container>,
document.querySelector('.example_4')
);
@IntCastillo
Copy link

What's fn?

@VanGoethe
Copy link

it's said that fn is not defined. what's fn?

@Neel738
Copy link

Neel738 commented Dec 30, 2020

fn is a function you call when something is clicked.

Just make an empty function called "fn"and you'll be set!

Copy link

ghost commented Mar 14, 2021

The 'active' attribute isn't working for me.
Did it work for anyone else?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment