JavaScriptを使用しない現代のHTML + CSSでは、シンプルで最小の非イメージスライダー/カルーセルが可能ですか？

Question

私のプログラミングは簡単ですが、HTMLを使ったレイアウトです。特にCSSは黒い芸術です。

私は、2016年にJSがなくても、最新のHTMLとCSSの標準を使ってこの概念的なUIが可能であるはずだと信じています。しかし、どこから始めるべきかわからない。

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

ウェブは、jQueryのまたはJavaScriptを使用しなくても、私に今可能なすべてのものを伝えるものでいっぱいのようです。しかし、私のCSSの教祖は実際にはほとんどのものがレイアウトのためにJSを必要としていると私に伝えています。

私のUIは、から構成されています

1. サイズ変更可能なウィンドウ
2. 各TEXTAREAがあるDIVの高さ
3. のほとんどを埋める4つのテキストエリアのストリップ
4. ウィンドウのほとんどを埋めDIVをDIVの半分の大きさのため、2つがきちんと並んでいます。
5. ユーザーが興味のあるTEXTAREAのペアを見ることができるように左右に移動するスクロールバー
6. ウィンドウのサイズを変更しても、ストリップの詳細は表示されません。ストリップのテキストエリアには、常に、ウィンドウの幅

に比例する幅を維持するので、2016年の中で最も近代的な技術を使用して、単にHTMLとCSSで可能なUIレイアウトのですか？

これは、JSでしか達成できない概念の一部ですか？

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

今、あなたがそのdivの内側に欲しいものは何でも投げると、あなたが欲しいものを得るだろう：私が正しくあなたを理解していれば

Answer 1

、あなただけ、のようなものを内部的に水平展開することができますdiv要素を必要としています。スクロールバーの変更を非表示にするには、overflow-xをhiddenに、jQuery scrollLeftで制御します。

私はここで少しのサンプルを作った：jsfiddle。