make a button to scroll horizontally in div

Question

I have a website where I have a div with images in it, set to overflow:auto; white-space: nowrap; So you can scroll horizontally in the div to see all the images in it.

Can I make two buttons (left and right) to scroll this div horizontally? I ask this because when I have a touchscreen or trackpad, I can scroll in the div but when I am on a desktop with only a mouse there is no option to scroll the div. And I hear you thinking just use the scrollbar but I have hidden those using CSS because they look different on different computers and browsers and were just a complete pain and didn't look clean enough for me. Here is my site (I made a page where I explain the problem again).

I have watched for carousel plugins but want to know if there's a way with CSS.

.blackbackgroundscroll {
   background: #fff;
   padding: 8px 8px 8px 8px;
   margin: 12px 0px 5px 0px;
   box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);
   border: 1px solid #dadce0;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
   overflow: auto;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
 }

<div class="blackbackgroundscroll">
  <a href="https://www.npostart.nl/pauw/VARA_101377247" target="_blank" rel="noopener noreferrer">
  <img src="https://tuberadar.nl/wp-content/uploads/PAUW-thumbnail.png" alt="" width="210" height="119" class="alignleft size-full wp-image-16930" />
  </a>
</div>

I have no idea where to start, because I also have the feeling this is going to need some JavaScript and I have no experience with JS.

Foskett

You can use a slider. Something like this: Slick carousel. – Barracks

Hi Maarten, Thank you for your reply, and i must say that is a cool website. It is almost exactly what im looking for except that you can not scroll in those carousels. It's only possible to navigate by clicking the buttons or dots... Thanks again for the tip. – Foskett

Here is a link were they added a way to navigate with mousescroll. working example – Barracks

Thank You Maarten. It does do the horizontal scroll but still it needs some tweaking to make it scroll how i want it to. I want it to be completely free without jumping to the next image perfectly. And i feel like this example is inverted and way to sensitive. But thanks a lot! – Foskett

Answer 1

You can scroll using Element.scrollLeft property to which you can provide the amount to scroll as an integer value.

Here is a basic example: JavaScript + CSS + HTML

    const buttonRight = document.getElementById('slideRight');
    const buttonLeft = document.getElementById('slideLeft');

    buttonRight.onclick = function () {
      document.getElementById('container').scrollLeft += 20;
    };
    buttonLeft.onclick = function () {
      document.getElementById('container').scrollLeft -= 20;
    };

    #container {
      width: 145px;
      height: 100px;
      border: 1px solid #ccc;
      overflow-x: scroll;
    }

    #content {
      width: 250px;
      background-color: #ccc;
    }

    <div id="container">
      <div id="content">Click the buttons to slide horizontally!</div>
    </div>
    <button id="slideLeft" type="button">Slide left</button>
    <button id="slideRight" type="button">Slide right</button>

Elsy

Thank you for your help. I will try to get my head around the code. Just to be clear. I know the second part is CSS and the third part is HTML. But what kind of code is the first part? Is it JavaScript? – Foskett

And may i also ask how the code would look like if you also want to add an button that scrolls to the other side? I would like to be able to scroll left and right with the buttons. Again, thank you for the help! – Foskett

Yes, the first part is JavaScript. I edited my answer and added scroll left option too. Hope it helps! Don't forget to mark the answer as Accepted if all good. – Elsy

Thank you for your answer, i appreciate it a lot. I do have some follow up questions. I hope you want to help and if not i totally understand. Q1- Is it possible to get the buttons to appear next to the container one on the left and one on the right both vertically centred (and is it possible to style them with css)? Q2- Is it possible to make them disappear when the site is viewed on mobile? – Foskett

Q3- Is it possible to scroll for example 5 images everytime you click on the scroll button? And the last question. Q4- when i have more than one of these containers underneath each other. Does the button make all the containers scroll at once or can i just scroll one at a time with the buttons? Thank You again, your answer already helped and i almost know if i can fix my problem with code or if i have to do it with a plugin. I hope the first one! Have a nice day. – Foskett

Everything you asked belongs to whole other topics, different than what your question was initially targeted. You should divide them and ask particular separate questions. More importantly, you should search for resources and try do them by YOURSELF and ask eventually what didn't worked. Because the answer to all 4 questions is 'Yes, you can do that' – Elsy

Understood. Thank you for your help! Have a nice day. – Foskett

I am doing something similar but need to disable the navigation button on the scroll end situation. is there any way to do this without calculating the width manually? – Hemicycle

What if I add overflow hidden does it work or not? – Vanthe