Ist so ein einfaches, minimales Nicht-Bild-Slider/Karussell in modernem HTML + CSS ohne JavaScript möglich?

Question

Für mich Programmierung ist einfach, aber Layout mit HTML und vor allem CSS ist eine schwarze Kunst.

Ich bin der Überzeugung, dass diese konzeptionelle UI, die ich mir vorgestellt habe, 2016 ohne JS mit den neuesten HTML- und CSS-Standards möglich sein sollte. Aber ich habe keine Ahnung, wo ich anfangen soll.

  +---------------------------+ 
strip  |window      | 
..........| +----------+ +----------+ |........... 
.ta1  | |ta2  | |ta3  | |ta4  . 
.   | |   | |   | |   . 
.   | |   | |   | |   . 
.   | |   | |   | |   . 
..........| +----------+ +----------+ |........... 
      | ==========[===]========== | 
      +---------------------------+ 

Die Bahn scheint voller Sachen zu sein, mir zu sagen, all die Dinge, die jetzt möglich sind, ohne jQuery oder JavaScript zu verwenden. Aber mein CSS-Guru sagt mir, dass die meisten Dinge immer noch JS für das Layout benötigen.

My UI besteht aus:

1. A veränderbares Fenster
2. A DIV, die den größten Teil des Fensters
3. Ein Streifen 4 Textfelder füllt, die den größten Teil der Höhe des DIV füllen
4. Jeder TEXTAREA- ist halb so groß wie der DIV, so passen zwei genau nebeneinander
5. Eine Bildlaufleiste, um den Streifen nach links und rechts zu bewegen, um in der Lage zu sein, welches Paar von TEXTAREAs der Benutzer interessiert ist
6. Durch die Größenänderung des Fensters wird kein weiterer Streifen mehr angezeigt. Die Textbereiche des Streifens immer eine Breite proportional zur Breite des Fensters halten

So ist eine solche UI-Layout möglich mit nur HTML und CSS mit den modernsten Technologien im Jahr 2016?

Wenn nicht, welches sind die Teile des Konzepts, die nur mit JS erreicht werden können?

Answer 1

Wenn ich Sie richtig verstehe, brauchen Sie nur ein div, die horizontal intern erweitern können, so etwas wie:

.slider { 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

Jetzt werfen, was Sie in diesem div wollen und Sie bekommen, was Sie wollen. Um den Rollbalkenwechsel overflow-x zu hidden zu verbergen, dann steuern Sie es über jQuery scrollLeft.

Ich habe hier eine kleine Probe gemacht: jsfiddle.