Change slider for horizontal scroll?

Question

i've done a horizontal picture gallery from the here: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?

and i was wondering if there is anyway to change the slider at the bottom to something like a nano slider? Something like this:

I'd really appreciate some help

Can you post what you've got so far? – wogsland Dec 02 '15 at 14:59 — wogsland, Dec 02 '15 at 14:59

score 0 · Answer 1 · answered Dec 02 '15 at 14:57

Use overflow-x: auto; on your container (section in your example)

<section>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</section>

CSS:

body {
   overflow: hidden;
}
section {
  /* The width of your document, I suppose */
  width:600px;
  margin: 0 auto;
  white-space:nowrap; 
  overflow-x: auto;
}
.pic-container {
 /* As large as it needs to be */
  width: 1500px;
}

score 0 · Answer 2 · answered Dec 02 '15 at 15:34

0

If i understand correctly, you want to change the styling for the scroll bar. If I'm correct, that isn't difficult. you should use Webkit Scrollbars for this. Here's a pretty good article on it.

you would probably want something like this:

::-webkit-scrollbar-track:horizontal {
  height: 3px;
  background: gray;
}
::-webkit-scrollbar:horozontal {
  background: white;
}

I'm not completely sure about it, thought. It's been a while since I've needed to style scroll bars.

note: since this is webkit it won't work in firefox (or maybe explorer, not sure) as far as I know, the only way to do this would be with javascript.

answered Dec 02 '15 at 15:34

ETHAN BEIGH

23
4

Hey Ethan, yes that's correct that's what i want. Hmm, any idea how to go about this with javascript (also i tried putting your code in my css and it doesn't have any effect T_T) – quainte Dec 03 '15 at 04:20
@quainte I'm not sure about using JS, I usually use CSS for all my styles. I haven't done much research regarding the topic, but I believe there is a [jQuery extension](http://manos.malihu.gr/jquery-custom-content-scroller/) that might work for you. If you try it our, I'd be interested in knowing how it works. If you want to take another shot at it with CSS [here](http://stackoverflow.com/a/14150577/24874) is a really good answer to a question regarding scrollbar styling, it talks about cross-browser styling, too. – ETHAN BEIGH Dec 04 '15 at 20:34

Change slider for horizontal scroll?

2 Answers2