C
вот макет
Size: a a a
2020 February 05
C
по идеи пишу в img : src={image[0]}
C
видает оштбку и картинку не показывает
C
как только не пробовал ...и src={require()} И style={{ backgroungImage: url(...) }}
C
выдает ошибку
C
и еще я без понятия как сделать такую анимацию на реакте, типо кликает на стрелку и след. становиться на место самого большого , а большой назад на маленкий. ааааа
T
import React from 'react'
class ImageSlider extends React.Component {
constructor(props) {
super(props);
let state = this.state
state = { count: 0 }
// this.handleClick = this.handleClick.bind(this)
}
// handleClick() {
// if(this.state.count == this.props.images.length == 0) {
// this.setState=({count: 0})
// }
// else if(this.state.count !== this.props.images.length == -1) {
// this.setState({count: this.state.count++})
// }
// }
render() {
const images = [
'../img/ImageFirst.jpg',
'../img/ImageSecond.jpg',
'../img/ImageThree.jpg',
]
const properties = {
animationDuration: '4s',
animationTimingFunction: 'ease-out',
animationIterationCount: 0,
transform: 'translateX(-200px)',
transition: 'all 0.5s ease-in-out',
transition: 'scale(1)'
}
return (
<div className="ImageSlider">
<div className="VectorDefault VectorLeft" > </div>
<img className="ImageDefault ImageFirst" />
<img className="ImageDefault ImageSecond" />
<img className="ImageDefault ImageThree" />
<div className="VectorDefault VectorRight"> </div>
</div>
)
}
}
export default ImageSlider
class ImageSlider extends React.Component {
constructor(props) {
super(props);
let state = this.state
state = { count: 0 }
// this.handleClick = this.handleClick.bind(this)
}
// handleClick() {
// if(this.state.count == this.props.images.length == 0) {
// this.setState=({count: 0})
// }
// else if(this.state.count !== this.props.images.length == -1) {
// this.setState({count: this.state.count++})
// }
// }
render() {
const images = [
'../img/ImageFirst.jpg',
'../img/ImageSecond.jpg',
'../img/ImageThree.jpg',
]
const properties = {
animationDuration: '4s',
animationTimingFunction: 'ease-out',
animationIterationCount: 0,
transform: 'translateX(-200px)',
transition: 'all 0.5s ease-in-out',
transition: 'scale(1)'
}
return (
<div className="ImageSlider">
<div className="VectorDefault VectorLeft" > </div>
<img className="ImageDefault ImageFirst" />
<img className="ImageDefault ImageSecond" />
<img className="ImageDefault ImageThree" />
<div className="VectorDefault VectorRight"> </div>
</div>
)
}
}
export default ImageSlider
Есть операция остатка от деления. Просто воспользуйся ей.
C
могу исходники скинуть
C
Есть операция остатка от деления. Просто воспользуйся ей.
?
T
Есть операция остатка от деления. Просто воспользуйся ей.
Если делаешь циклический переключатель, то вместо того чтобы ловить i === array.length
T
Можно использовать установку значения i % array.length
C
но мой вопрос висит
C
с картинками
C
Можно использовать установку значения i % array.length
спасибо
T
import React from 'react'
class ImageSlider extends React.Component {
constructor(props) {
super(props);
let state = this.state
state = { count: 0 }
// this.handleClick = this.handleClick.bind(this)
}
// handleClick() {
// if(this.state.count == this.props.images.length == 0) {
// this.setState=({count: 0})
// }
// else if(this.state.count !== this.props.images.length == -1) {
// this.setState({count: this.state.count++})
// }
// }
render() {
const images = [
'../img/ImageFirst.jpg',
'../img/ImageSecond.jpg',
'../img/ImageThree.jpg',
]
const properties = {
animationDuration: '4s',
animationTimingFunction: 'ease-out',
animationIterationCount: 0,
transform: 'translateX(-200px)',
transition: 'all 0.5s ease-in-out',
transition: 'scale(1)'
}
return (
<div className="ImageSlider">
<div className="VectorDefault VectorLeft" > </div>
<img className="ImageDefault ImageFirst" />
<img className="ImageDefault ImageSecond" />
<img className="ImageDefault ImageThree" />
<div className="VectorDefault VectorRight"> </div>
</div>
)
}
}
export default ImageSlider
class ImageSlider extends React.Component {
constructor(props) {
super(props);
let state = this.state
state = { count: 0 }
// this.handleClick = this.handleClick.bind(this)
}
// handleClick() {
// if(this.state.count == this.props.images.length == 0) {
// this.setState=({count: 0})
// }
// else if(this.state.count !== this.props.images.length == -1) {
// this.setState({count: this.state.count++})
// }
// }
render() {
const images = [
'../img/ImageFirst.jpg',
'../img/ImageSecond.jpg',
'../img/ImageThree.jpg',
]
const properties = {
animationDuration: '4s',
animationTimingFunction: 'ease-out',
animationIterationCount: 0,
transform: 'translateX(-200px)',
transition: 'all 0.5s ease-in-out',
transition: 'scale(1)'
}
return (
<div className="ImageSlider">
<div className="VectorDefault VectorLeft" > </div>
<img className="ImageDefault ImageFirst" />
<img className="ImageDefault ImageSecond" />
<img className="ImageDefault ImageThree" />
<div className="VectorDefault VectorRight"> </div>
</div>
)
}
}
export default ImageSlider
Также тут нигде не передаются в картинки их пути
T
И почему пути к ним создаются в рендере?
T
Это должно быть в state
T
В конструкторе неправильно инициировано состояние