React Content slider - css

Question

I am trying to create content slider in React, and to an extent I have succeeded, however I want the content to move horizontally instead of Vertically. Right now all the items are stacked on top of each other which I know is why they cannot work as a horizontal slider, initially I tried using flexbox in order to align the items next to each other but then they are unable to be moved using left or right in the CSS.
What I am currently doing is setting the top of the inner div (Which house the items) to a calculated number of pixels so that it will display the next "Slide". What I have been trying and failing is trying the get the items to be next to each other and the rather than top just change the left/ right of the slider to display the item.
(P.S. I have not added a way to stop the slider over the total number of items, will do that after)
Here 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;
}

Answer 1

Coolness, so with a bit of testing and some other carousel examples I have built my own version. There is still room for improvement but here is the base of it. the idea is to have a super long container were all of the images flex next to each other and by using the CSS property "translate" to move each image left or right depending on the direction clicked.
Below is the React JS example:
export default () => {
const [translate, setTranslate] = useState(0);
const handleClickBtn= (direction) => {
if (direction == "right") {
setTranslate({ translate: translate - 100 });
} else {
setTranslate({ translate: translate + 100 });
}
};
return (
<div className="banner-carousel">
<button
className="carousel-button btn-left"
onClick={(_) => handleClickBtn("left")}
>
Left
</button>
<div className="carousel-container">
<div
className="slide"
style={{ transform: `translateX(${translate}vw)`}}
>
<img className="carousel-image" src="https://www.publicdomainpictures.net/pictures/40000/nahled/random-texture.jpg" />
</div>
<div
className="slide"
style={{ transform: `translateX(${translate}vw)`}}
>
<img className="carousel-image" src="https://www.publicdomainpictures.net/pictures/40000/nahled/random-texture.jpg"/>
</div>
<div
className="slide"
style={{ transform: `translateX(${translate}vw)`}}
>
<img className="carousel-image" src="https://www.publicdomainpictures.net/pictures/40000/nahled/random-texture.jpg"/>
</div>
</div>
<button
className="carousel-button btn-right"
onClick={(_) => handleClickBtn("right")}
>
Right
</button>
</div>
);
};
Here is the SCSS:
.banner-carousel {
height: 720px;
.carousel-button {
cursor: pointer;
position: absolute;
top: 45%;
color: #fff;
z-index: 100;
&.btn-left {
left: 25px;
}
&.btn-right {
right: 25px;
}
}
.carousel-container {
display: flex;
width: 10000px;
.slide {
width: 100vw;
height: 720px;
transition: transform 0.25s linear;
.carousel-image {
width: 100%;
}
}
}
}
Again this still needs to be improved so might come back at a later date and update. If you have any other suggestions please feel free to post!