Horizontal Scroll on hover / on click

Question

First of all thanks in advance for any help.

Case: I have multiple divs in one line. These divs are in a box and I'm able to scroll horizontally in this box to see the other divs. I've made two buttons (L for left and R for right) to scroll horizontally when hovering or clicking these buttons.

Problem: I've already tried with some CSS and JavaScript but I can't seem to get this right.

Does anybody know how to achieve horizontal scroll when hovering / clicking on a button (or arrow)?

I've made a fiddle: https://jsfiddle.net/wsemLhtz/

Would be awesome to get this working with CSS only or simple JavaScript since I have to implement this into a Joomla system. I know there are some jQuery plug-ins out there but in Joomla I have to replace all $-tags with "jQuery" and it's quite annoying to do this in every file.

Best regards.

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}

.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.box-inner {
  width: 10rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}

.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

<div class="box-outer">
  <a class="arrow-left">L</a>
  <a class="arrow-right">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

Answer 1

You can use that)

var box = $(".box-inner"), x;
$(".arrow").click(function() {
  if ($(this).hasClass("arrow-right")) {
    x = ((box.width() / 2)) + box.scrollLeft();
    box.animate({
      scrollLeft: x,
    })
  } else {
    x = ((box.width() / 2)) - box.scrollLeft();
    box.animate({
      scrollLeft: -x,
    })
  }
})

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}
.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}
.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}
.box-inner {
  width: 10rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}
.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box-outer">
  <a class="arrow-left arrow">L</a>
  <a class="arrow-right arrow">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

Fiddle