Created
April 27, 2017 20:30
-
-
Save DZuz14/24a7fab2314dea6140cbfc59882bb59d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
This is an example of what I am reverting it to. | |
For full view of the code, visit the repository here https://github.com/DZuz14/react-slider | |
*/ | |
// This is the Main Slider Component now | |
import React, { Component } from 'react'; | |
import Slide from './Slide'; | |
import RightArrow from './RightArrow'; | |
import LeftArrow from './LeftArrow'; | |
import Dots from './Dots'; | |
require('./style.scss'); | |
/* To Do */ | |
/* | |
=> Add Dots & Arrow Funtionality | |
*/ | |
export default class Slider extends Component { | |
constructor(props) { | |
super(props); | |
// User just needs to set the name of each picture in whatever order they would like. | |
// This array is passed down to the child Slide as props. | |
this.state = { | |
background: ['aurora','canyon','martin'] | |
} | |
} | |
render() { | |
return ( | |
<div className="slider"> | |
{/* There are no more individual slides, you only need one Slide Component */} | |
<Slide background={this.state.background} current={1} /> | |
</div> | |
); | |
} | |
} | |
// This is now the child Slide Component | |
import React, { Component } from 'react'; | |
const Slide = (props) => { | |
const current = props.background[props.current]; | |
console.log(current); | |
const styles = { | |
imageBackground: { | |
backgroundImage: `url(${current}.jpg)`, | |
backgroundSize: 'cover', | |
backgroundPosition: 'center center' | |
} | |
} | |
return ( | |
<div className="slide" style={styles.imageBackground}></div> | |
) | |
} | |
export default Slide; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello Bro,its good but you also write over code in a file no use the export files set your export file in this code