How to make a full screen slider consisting of 1/3 and 2/3 sliders?

Question

css

Hello. I don't know how to make a slider of 2 slides, where the first slide is 1/3 and the second is 2/3. I know the Java part, but I can't solve the problem with the dimensions, because I need to specify everything as a percentage...

<div id="slider">
       <div id="sli1>БОльший слайд</div>
       <div id="sli2>МЕньший слайд</div>
   </div>

#slider {width:150%; }
#sli1 {width:100%}
#sli2 {width:50%}

Let's say there is a slider div 150% and there are 2 slides in the slider. One "#sli1" 100%, the second "#sli2" 50%, but that's impossible. "#sli1" at 100% takes up the entire space of "#slider" at 150%. How else? 100 is not divisible by 3... At least for css... Maybe there is another, more correct way? I will be glad to any answers.

Answer 1

Maybe you need a hover effect?