PDA

View Full Version : CSS Horizontal Slider


RyanBeckett01
10-07-2012, 04:58 PM
I wondering could someone help me achieve this result?

With my current attempts at the moment it goes vertically aswell. Just wont work.

Any help at all would be appreciated. :confused:

RyanBeckett01
10-07-2012, 05:11 PM
Here is the example.

http://germansaez.com/photo/places/miami/

johnMoss
10-07-2012, 10:29 PM
I wondering could someone help me achieve this result?

What result Ryan? Something with the menu or getting the girl to let you take her picture too? :)

RyanBeckett01
10-07-2012, 10:50 PM
What result Ryan? Something with the menu or getting the girl to let you take her picture too? :)

Thanks for reply haha. I want to know how to make a Horizontal image slider like that

johnMoss
10-07-2012, 11:20 PM
How familiar are you with coding? The script appears to be called preview.js but doing a cursory search I did not find an open source download for it. Truth be told you can just pull all the code you need directly from the site, but in the absence of an open source declaration (meaning free for anyone to use) it would be bad protocol to do so, and no one here would assist in that process...
That said, it is of course a very simple piece of javascript.

RyanBeckett01
10-07-2012, 11:32 PM
How familiar are you with coding? The script appears to be called preview.js but doing a cursory search I did not find an open source download for it. Truth be told you can just pull all the code you need directly from the site, but in the absence of an open source declaration (meaning free for anyone to use) it would be bad protocol to do so, and no one here would assist in that process...
That said, it is of course a very simple piece of javascript.

I'll be honestly new but I pick it up very fast. Top of my class :lol:
You be able to help me take it off the website ?

domedia
10-08-2012, 02:21 PM
How familiar are you with coding? The script appears to be called preview.js but doing a cursory search I did not find an open source download for it. Truth be told you can just pull all the code you need directly from the site, but in the absence of an open source declaration (meaning free for anyone to use) it would be bad protocol to do so, and no one here would assist in that process...
That said, it is of course a very simple piece of javascript.

John, can you show where the slider is using Javascript?

Here's the core of the slider:
width: 10000px;
overflow: scroll

preview.js is something else completely, did you look at it?

johnMoss
10-08-2012, 02:26 PM
DUH! :(
My bad... I thought I saw it roll for a sec when I released the mouse button off the slider...

gentleone
10-08-2012, 02:34 PM
Here's the core of the slider:
width: 10000px;
overflow: scroll

Yes, it's just as simple as that.

And for the styling of the scrollbar they've use webkit proprietary CSS which is stupid, cause it only works in Safari and Chrome.

::-webkit-scrollbar{width:12px;height:8px;}
::-webkit-scrollbar-button:start:decrement
::-webkit-scrollbar-button:end:increment{display:block;height:0;backgr ound-color:#fb3b33}
::-webkit-scrollbar-track-piece{background-color:#000;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#fb3b33}
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#fb3b33}

For a crossbrowser customizable scrollbar solution I'd recommend jScrollPane:
http://jscrollpane.kelvinluck.com/

domedia
10-08-2012, 02:41 PM
I noticed the -webkit only implementation as well. Not cool, but then it just drops down to a regular browser scroll bar for non webkit browsers, so it degrades gracefully.

RyanBeckett01
10-08-2012, 09:35 PM
I noticed the -webkit only implementation as well. Not cool, but then it just drops down to a regular browser scroll bar for non webkit browsers, so it degrades gracefully.

Thanks everyone for there help. I'll give it a go and let you's know. Really appreciate it.