0

I'm trying to make a slider where

  • There will be 3 parent slide component
  • Inside there will be 4 different number of it's
  • After click on child slide component the parent number will be update with that number

Like

  • Parent: 1.1 (Default)
  • Child: 1.1 | 1.2 | 1.3 |1.4
  • Clicked on 1.3
  • Parent: 1.3 (Update after click)

Demo

If you are unable to understand please see this theme & carousel slider section for getting idea.

Live Code of Current

I have created a sandbox of it

Code

import "./styles.css";
import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import {
  Box,
  ImageList,
  ImageListItem,
  Stack,
  Typography
} from "@mui/material";
import { hero } from "./data";

const settings = {
  dots: true,
  lazyLoad: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  initialSlide: 1
};

export default class App extends Component {
  state = {
    nav1: null,
    nav2: null
  };

  componentDidMount() {
    this.setState({
      nav1: this.slider1,
      nav2: this.slider2
    });
  }
  render() {
    return (
      <Slider
        asNavFor={this.state.nav2}
        ref={(slider) => (this.slider1 = slider)}
        {...settings}
      >
        {hero.map((item) => (
          <Box
            key={item}
            maxWidth="sm"
            sx={{ margin: "0 auto !important", display: "block !important" }}
          >
            <Stack direction="row" justifyContent="center">
              <Box flex={1} alignSelf="center">
                <Typography variant="h3" fontWeight="700">
                  {item.title}
                </Typography>
                <Typography variant="subtitle1">{item.description}</Typography>
                <Typography variant="h6">{item.price} Taka</Typography>
                <Box>
                  <ImageList>
                    <Slider
                      slidesToShow={4}
                      asNavFor={this.state.nav1}
                      ref={(slider) => (this.slider2 = slider)}
                    >
                      {item.childImage.map((item) => (
                        <ImageListItem key={item}>
                          <Typography>{item}</Typography>
                        </ImageListItem>
                      ))}
                    </Slider>
                  </ImageList>
                </Box>
              </Box>
              <Box flex={1}>
                <Typography variant="h1">{item.parentImage}</Typography>
              </Box>
            </Stack>
          </Box>
        ))}
      </Slider>
    );
  }
}
mrhrifat
  • 161
  • 1
  • 2
  • 9

1 Answers1

0

Did you try useRef hook? You can make reference to each item and make update your value using componentDidUpdate. I suggest you try functional components 'cause it's easier to making functionalities like your.

https://reactjs.org/docs/hooks-reference.html#useref

Damian Goździński
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 12 '22 at 23:27