foodborn/js/index.js
// Let's use this function
Let's use this function
Let ' s use this function
function scrollIt(x){
  let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
  if (active==="middle-top"){
    document.querySelector('.middle-top').style.width = transform+"px";
    scrollerMiddleTop.style.left = transform-25+"px";
    if (scrollerTop.getBoundingClientRect().left>scrollerMiddleTop.getBoundingClientRect().left-5){
      document.querySelector('.top').style.width = transform-5+"px";
      scrollerTop.style.left = transform-30+"px";
    }
    if (scrollerMiddleTop.getBoundingClientRect().left>scrollerMiddleBottom.getBoundingClientRect().left-5){
      document.querySelector('.middle-bottom').style.width = transform+5+"px";
      scrollerMiddleBottom.style.left = transform-20+"px";
    }
  }
  if (active==="middle-bottom"){
    document.querySelector('.middle-bottom').style.width = transform+"px";
    scrollerMiddleBottom.style.left = transform-25+"px";
    if (scrollerMiddleTop.getBoundingClientRect().left>scrollerMiddleBottom.getBoundingClientRect().left-5){
      document.querySelector('.middle-top').style.width = transform-5+"px";
      scrollerMiddleTop.style.left = transform-30+"px";
    }
    if (scrollerTop.getBoundingClientRect().left>scrollerMiddleBottom.getBoundingClientRect().left-5){
      document.querySelector('.top').style.width = transform-10+"px";
      scrollerTop.style.left = transform-30+"px"; 
    }
  }
  if (active==="top"){
    document.querySelector('.top').style.width = transform+"px";
    scrollerTop.style.left = transform-25+"px";
    if (scrollerTop.getBoundingClientRect().left>scrollerMiddleTop.getBoundingClientRect().left-5){
      document.querySelector('.middle-top').style.width = transform+5+"px";
      scrollerMiddleTop.style.left = transform-20+"px";
    }
    if (scrollerTop.getBoundingClientRect().left>scrollerMiddleBottom.getBoundingClientRect().left-10){
      document.querySelector('.middle-bottom').style.width = transform+10+"px";
      scrollerMiddleBottom.style.left = transform-15+"px"; 
    }
  }
}
function scrollIt ( x ) { let transform = Math . max ( 0 , ( Math . min ( x , document . querySelector ( '.wrapper' ) . offsetWidth ) ) ) ; if ( active === "middle-top" ) { document . querySelector ( '.middle-top' ) . style . width = transform + "px" ; scrollerMiddleTop . style . left = transform - 25 + "px" ; if ( scrollerTop . getBoundingClientRect ( ) . left > scrollerMiddleTop . getBoundingClientRect ( ) . left - 5 ) { document . querySelector ( '.top' ) . style . width = transform - 5 + "px" ; scrollerTop . style . left = transform - 30 + "px" ; } if ( scrollerMiddleTop . getBoundingClientRect ( ) . left > scrollerMiddleBottom . getBoundingClientRect ( ) . left - 5 ) { document . querySelector ( '.middle-bottom' ) . style . width = transform + 5 + "px" ; scrollerMiddleBottom . style . left = transform - 20 + "px" ; } } if ( active === "middle-bottom" ) { document . querySelector ( '.middle-bottom' ) . style . width = transform + "px" ; scrollerMiddleBottom . style . left = transform - 25 + "px" ; if ( scrollerMiddleTop . getBoundingClientRect ( ) . left > scrollerMiddleBottom . getBoundingClientRect ( ) . left - 5 ) { document . querySelector ( '.middle-top' ) . style . width = transform - 5 + "px" ; scrollerMiddleTop . style . left = transform - 30 + "px" ; } if ( scrollerTop . getBoundingClientRect ( ) . left > scrollerMiddleBottom . getBoundingClientRect ( ) . left - 5 ) { document . querySelector ( '.top' ) . style . width = transform - 10 + "px" ; scrollerTop . style . left = transform - 30 + "px" ; } } if ( active === "top" ) { document . querySelector ( '.top' ) . style . width = transform + "px" ; scrollerTop . style . left = transform - 25 + "px" ; if ( scrollerTop . getBoundingClientRect ( ) . left > scrollerMiddleTop . getBoundingClientRect ( ) . left - 5 ) { document . querySelector ( '.middle-top' ) . style . width = transform + 5 + "px" ; scrollerMiddleTop . style . left = transform - 20 + "px" ; } if ( scrollerTop . getBoundingClientRect ( ) . left > scrollerMiddleBottom . getBoundingClientRect ( ) . left - 10 ) { document . querySelector ( '.middle-bottom' ) . style . width = transform + 10 + "px" ; scrollerMiddleBottom . style . left = transform - 15 + "px" ; } } }
Let's use this function
Let ' s use this function
// Calculate our transform // we show all our bottom image but how much of our middle and top, // that'll depend on what we're dragging // if we're dragging the middle-top slider // if we're using scroller-middle, middle must always be to the right of top // if we're dragging the middle-bottom slider // if we're using scroller-middle, middle must always be to the right of top // if we're dragging the top slider // if we're using scroller-top, top must always be to the left