How to have an element sized relative to its grandparent *and* be able to move it?

Hello! So I'm trying to create an image slider that has 'x' number of visible slides on the screen (see the attached image). The slider itself is then moved across the screen. The html structure goes like this: I- container I-- dummy-page I-- slider I-- slide I-- slide The slide widths are set at 30% of their grandparent - the dummy-page. But this means that I can't set the positioning of the slider (the slides' parent). Problem is I'd like to be able to move the whole slider - which as far as I know I can't do without using position: absolute. I thought maybe using transform could help - it moves the slider but it seems to implicitly set the parent positioning, which means the slides get their width from the parent and not their grandparent 😩 You can see the effect in the codepen below - uncomment line 11 Would appreciate a different set of eyes on this, because I'm probably coming at it wrong! Thanks! https://codepen.io/nwoodward/pen/RwJvmgQ?editors=0110