home » code » photo galleries » css horizontal scroller
The easiest way to give a container a horizonatal scrollbar, is to give the outer container overflow:auto and the inner container a larger width than it's parent. However, that simple solution is messy, limiting, and unflexable. Therefore, I'm going to present four equally clever methods to create a CSS Scroller while maintaining a widthless inner container. Thereby, giving you the flexibility to add or remove an unlimited amount of inner elements without having to adjust the width of the inner container each time. This idea may seem somewhat easy, but I assure you, it is not! Paul O'B wrote a excellent tutorial on the subject documenting two ways to do this. I would urge you to read it! And Erik.J over at SitePoint Forums posted the third very clever way to create a CSS Scroller.
For inline elements, you only need {white-space:nowrap;}. Therefore, if your only putting images (an inline element) inside your scroller, then this is all that is needed and as simple as it gets!
This method is nice and easy to implement—you can create scrolling text with a single line of code. The tag is supported by the major browsers. The main disadvantage of the tag is that it's non-standard HTML. It is not actually included in the official HTML specifications. May 10, 2017 Baron is a small custom scrollbar script that uses native scrolling for optimal performance, and can be nested as well. Vertical, horizontal and bidirectional scroll are supported, and CSS can be used to fully customize its look. Like most of the custom scrollbars we list here, Baron just hides the system scrollbar without removing it.
![]()
If you want to have centered captions below your images, then things start to get a little more complicated. Because, white-space:nowrap will not work on block level (or floated) elements. Therefore, this method uses {display:table; and display:table-cell;} for capable browsers, and {display:inline-block; display:inline;} (the Trip Switch) for IE.
Free Custom Image Horizontal Scroller Html Css Code Download Free
This produces the same results as method #2 and method #4 but uses {display:-moz-inline-box; and display:inline-block;} for capable browsers, and {display:inline;} for IE. Note though, display:-moz-inline-box is a Vendor Specific Extension and not valid CSS.
Free Custom Image Horizontal Scroller Html Css Code Download Pc
I believe, this is the simplest, and therefore, my favorite method of the bunch. Not to mention - it's completely hack free! It's using a floated inner container (the ul) and a large negative right margin {float:left; and margin-right:-999em;} to create the CSS Scroller!
...and add a little JS!
Now, if I just stopped there, I would not of created anything new - there's no fun in that! So, let's dress it up a little bit by adding some javascript to get rid of that ugly stock scrollbar. There are some that will say 'don't change people's scrollbars'. Well, to them I will say 'SHUT-UP and go use one of the previous examples then!'. Each of the below examples degrades perfect in all browsers. When JS is off (or not supported) then it just defaults back to the stock scrollbar - no harm done! Although, I found this script to be little sensitive when using the following techniques. Therefore, in order to provide a cross browser custom scrollbar (that also degraded perfect) I had to tweak a thing or two in each. Nothing big, just a random position:relative there, or a display:inline here. No more than two clean tweaks in each!
THE SET-UP IS EASY - just do this!Downlaod the 'fleXcroll' here >> save the script as flexcroll.js and link to it in the head of your page >> add class='flexcroll' to the container with the scrollbar >> and then just include the fleXcroll CSS in your CSS style sheet. Walla!
![]()
This is the simple version, shone here with the pretty scrollbar and only images.
Free Custom Image Horizontal Scroller Html Css Code Downloads
This one comes with the captions and is using display:inline in lieu of display:table. Yes you can switch it like that in example #2 as well. Actually, it seems you can remove display:table (or display:inline) in all browsers except in FX3. FX has an inital load page bug - after page reload it's fine.
Which brings us to the final example. This one is my bread and butter - my one and only - the one that I will choose to use when the time comes. This one just needed some position:relative thrown in for IE6. I had fun making these, and I hope that you find them useful!
Javascript Horizontal ScrollerPlease enable JavaScript to view the comments powered by Disqus.Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |