hippietrail hippietrail - 4 months ago 12x
HTML Question

Is such a simple, minimal non-image slider/carousel possible in modern HTML+CSS without JavaScript?

For me programming is easy but layout with HTML and especially CSS is a black art.

I'm led to believe this conceptual UI I've imagined should be possible without JS in 2016 using the latest HTML and CSS standards. Yet I have no clue where to begin.

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

The web seems to be full of stuff telling me all the things that are now possible without having to use jQuery or JavaScript. But my CSS guru tells me in actuality most things still need JS for layout.

My UI consists of:

  1. A resizable window

  2. A DIV that fills most of the window

  3. A strip of 4 TEXTAREAs that fill most of the DIV's height

  4. Each TEXTAREA is half the size of the DIV so two fit neatly side by side

  5. A scrollbar to move the strip left and right so as to be able to view whichever pair of TEXTAREAs the user is interested in

  6. Resizing the window does not reveal more of the strip. The TEXTAREAs of the strip always maintain a width proportional to the window's width

So is such a UI layout possible with just HTML and CSS using the most modern technologies in 2016?

If not, which are the parts of the concept that can still only be achieved with JS?


If I understand you correctly, you just need a a div that can internally expand horizontally, something like:

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

Now throw whatever you want inside that div and you will get what you want. To hide the scrollbar change overflow-x to hidden then control it via jQuery scrollLeft.

I made a little sample here: jsfiddle.