My current project involves creating a content slider in React. While I have made some progress, I am facing a challenge in making the content move horizontally instead of vertically. Currently, all the items are stacked on top of each other, preventing them from functioning as a horizontal slider. I initially attempted to use flexbox to align the items next to each other, but I ran into issues with moving them left or right in the CSS.
My approach so far has been setting the top of the inner div (which houses the items) to a calculated number of pixels to display the next "slide". However, I have been struggling to get the items to line up next to each other and change the left/right of the slider to display the item instead of adjusting the top.
(P.S. I plan to add a way to stop the slider once it reaches the total number of items)
Below is the React Code:
import React, { Component } from "react";
import "../App.css";
class Item extends Component {
constructor(props) {
super(props);
this.state = {
id: 1,
top: "0px",
};
}
onClickSlide = (_) => {
const item = this.state.id;
this.setState({ top: item * 200 * -1 + "px" });
this.setState({ id: item + 1 });
};
render() {
let dang = [
{ title: "Header 1", content: "Lorem ipsum proin gravida" },
{ title: "Header 2", content: "Lorem ipsum proin gravida" },
{ title: "Header 3", content: "Lorem ipsum proin gravida" },
{ title: "Header 4", content: "Lorem ipsum proin gravida" },
];
const item = this.state.id;
let innerStyle = {top: item * 200 * -1 + "px"};
return (
<div className="Outer">
<div className="inner" onClick={this.onClickSlide} style={{ top: this.state.top }}>
{dang.map((data, i) => {
return (
<div className="items">
<h3>{data.title}</h3>
<h3>{data.content}</h3>
</div>
);
})}
</div>
</div>
);
}
}
export default Item;
Here is the CSS:
.Outer {
display: block;
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
.inner {
/* display: block; */
position: absolute;
transition: all 0.5s;
}
.items {
display: inline-block;
width: 200px;
height: 200px;
vertical-align: top;
}