react_slider

HTML

<div id="app"></div>

CSS

:root{
  --slider-container-scope: 0; 
  --unit-width: 0;
  --item-left:0;
}

.page {
  text-align: center; 
  display:flex; 
  width:100%;
  flex-direction: column;
  align-items:center;
  justify-content: center;
}  

.slider_metacontainer{
  width: 400px;

  background: #444;
  
  display: flex;
  overflow: auto;
  margin: 10vh 0;
}

.slider_container{
  position:relative; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;

  left:var(--item-left);
  transition: left 0.5s ease-out;
}

.slider_item{
  width: var(--unit-width);
  height:25vh;
}

.slider_item:nth-child(3n-2) { background-color: #EF5350; }
.slider_item:nth-child(3n-1) { background-color: #2E7D32; }
.slider_item:nth-child(3n) { background-color: #03A9A4; }

React

let scopeProps= 5 

class App extends React.Component{

  state={
    // number of items in he slider
    totalSliderItem:0,
    // deplacement range to handle the sliding => default to scopeProps
    moveRange: scopeProps,
    // range of sliderView => default to scopeProps
    boxScope:scopeProps,

    // unitWidth of each box item => scopeProps/ number of item desired inside a box view
    unitWidth:0,

    // number of item outside box view localize at the right of box
    outsideBoxRight:0,
    // number of item outside box view localize at the left of box
    outsideBoxLeft:0


  } 

  componentDidMount(){
    // set CSS variable 
    // § call body variable     
    let root= document.body;

    // § update css variable --slider-container-scope
    root.style.setProperty('--slider-container-scope', scopeProps);
   
    // § update css variable CSS variable --unit-width
    // call metacontainer ref
    let SliderMetaContainer= this.refs.sliderMetaContainer
    // get metacontainer width
    let metaContainerWidth=SliderMetaContainer.getBoundingClientRect().width
    let unitWidth= metaContainerWidth/scopeProps
    root.style.setProperty('--unit-width', unitWidth + "px") ;

    // set number of items contained in slider
    let sliderContainer= this.refs.sliderContainer
    let sliderContainerLength= sliderContainer.childElementCount
    console.log("sliderContainerRef length: ", sliderContainerLength);

    // initial number of items localized outside box view == all box overcosm slider scope
    let outsideBoxRight=sliderContainerLength-scopeProps

    // initialize state after componentDidMount
    this.setState({
      totalSliderItem:sliderContainerLength,
      outsideBoxRight,
      unitWidth
    })
  }

  // when user click a button to move => handleSlideMove()
  handleSlideMove=(direction)=>{
    console.log("window: ", window)

  
    console.log("in handleSlideMove")

    // appreciate number of item outsideBox depending of direction targeted
   ...