I'm trying to make an Instagram clone and in the stories page when the user changes the current story to another one I need to change the state value to the another one's stories so always the active slide shows the stories which the state have its data .
I tried to use slideChangeHooks that react-slick provided them but i couldn't add any extra actions to the main one which is changing the center slide, so if i added something to the function the slider won't work correctly and won't change the center slide
class CenterMode extends Component {
state = {
activeSlide: 0,
activeSlide2: 0,
};
render() {
const settings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow: 5,
slidesToScroll: 1,
centerMode: true,
draggable: false,
focusOnSelect: true,
easing: "ease-in",
arrows: false,
centerPadding: "40px",
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 1.5,
centerPadding: "20px",
},
},
],
beforeChange: (current, next) => {
this.setState({ activeSlide: next });
},
afterChange: (current) => {
this.setState({ activeSlide2: current });
// setShow({
// storyIndex: current,
// newStories: data[current].stories.map((item) => !item.seen && item),
// });
},
};
return (
<Slider {...settings}>
{data.map((item, index) => {
let theSrc = "";
for (let i = 0; i < item.stories.length; i++) {
if (!item.stories[i].seen) {
theSrc = item.stories[i].story.src;
break;
}
}
if (theSrc != "")
return (
<Box
sx={{
p: { lg: "30px", xs: "50px 30px" },
boxSizing: "border-box",
backgroundColor: "transparent",
}}
key={index}
>
<Paper variant="plain" sx={{ overflow: "hidden" }}>
<img
src={
// show.storyIndex != index
// ?
theSrc
// : show.newStories[0].story.src
}
alt={item.user}
/>
</Paper>
</Box>
);
else return;
})}
</Slider>
);
}
}
so I commented the setShow which making the error .
Can you help me please .
If there is a better way to make the story change I hope you suggest me .
I tried to change the state value in the beforeChange function and afterChange function , and no one of them worked correctly so the states of the slide ( activeSlide, activeSlide2 ) didn't change their values , to be more accurate if i put it in beforeChange the slider won't move at all , if i put it in afterChange the slider will go to the other story and get back to the first one so the activeSlide2 doesn't change its value .
I hope I made it clear