Currently, I am in the process of developing an image carousel that showcases images moving smoothly from right to left. However, despite its functionality, there seems to be a slight jaggedness in the animation that I can't seem to resolve. Interestingly, when I tested the carousel on a fiddle, it performed better compared to my actual site. I suspect that the dimensions of the images might be causing this issue. For further details and to view the fiddle, please visit here.
React code
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
const ImageArray = ["https://media-cdn.tripadvisor.com/media/photo-s/09/c7/bc/96/the-bull-ring-arena.jpg", "https://media-cdn.tripadvisor.com/media/photo-s/0d/0a/cb/5d/the-bull-ring-arena-ext.jpg"];
class CarouselImage extends React.Component{
componentDidMount(){
}
render(){
return (
<div className="all-detail-images">
<img ref="bull" className="blurred-background" src={this.props.src} alt="detail image"/>
<img ref="bullRing" className="detail-image-style" src={this.props.src} alt="detail image"/>
</div>
)
}
}
class Carousel extends React.Component{
constructor(props) {
super(props);
this.state = {position: 0};
}
componentDidMount(){
setInterval( () => {
if(this.state.position){
this.setState({position: 0});
}else{
this.setState({position: 1});
}
},6000);
}
render(){
return (
<div className="image-gallery-div">
<ReactCSSTransitionGroup transitionName="carousel-image"
transitionLeaveTimeout={1000}
transitionEnterTimeout={1000}>
<CarouselImage src={ImageArray[this.state.position]} key={this.state.position}/>
</ReactCSSTransitionGroup>
</div>
)
}
}
class HelloWidget extends React.Component{
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this)
this.state = {
name: ''
};
}
handleChange(e) {
this.setState({
name: e.target.value
});
}
render() {
return <div className="max-width-carousel">
<Carousel /> </div>;
}
}
React.render(<HelloWidget />, document.getElementById('container'));
CSS
.max-width-carousel{
width: 100%;
max-width: 100%;
overflow: hidden;
height: 75vh;
}
.all-detail-images{
z-index: 0;
width: 100%;
height: 75vh;
position: relative;
overflow: hidden;
float: left;
}
.blurred-background{
filter:blur(3px);
width: 100%;
height: 100%;
}
.image-gallery-div{
top: 0;
width: 100%;
text-align: center;
overflow: hidden;
}
.detail-image-style{
height : 75vh;
max-width: 100%;
position: absolute;
z-index: 5;
left: 0;
right: 0;
margin: auto;
}
.carousel-image-enter {
margin-left: 100%;
}
.carousel-image-enter.carousel-image-enter-active {
margin-left: 0%;
transition: all 1s linear;
}
.carousel-image-leave {
position: absolute;
top:0;
left:0;
}
.carousel-image-leave.carousel-image-leave-active {
transition: all 1s linear;
left: -100%;
}