jQuery Div Slider not working?

Question

So I'm looking for a jQuery div slider like this:

http://plnkr.co/edit/ZdCw7IEYdV5YVeGg33oX?p=preview

I have tried to change the jQuery listed below:

<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

However, when I run it, buttons don't work.

Can someone help please?

I'm trying to understand what seems to be going wrong, but I can't figure it out.

Answer 1

You will have to add event as a parameter to your functions because you get the following errors when event.preventDefault() is called:

ReferenceError: event is not defined[Learn More]  script.js:11:7
ReferenceError: event is not defined[Learn More]  script.js:4:7

change your code like this:

$('#right-button').click(function(event) {
  ...
}

$('#left-button').click(function(event) {
  ...
}

example:

$('#right-button').click(function(event) {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

$('#left-button').click(function(event) {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

/* Put your css in here */

.left {
  float: left;
  width: 30%;
  height: 200px;
  border: 1px solid black;
}

.internal {
  width: 31.75%;
  height: 100%;
  border: 1px solid black;
  display: inline-block;
}

.center {
  float: left;
  width: 38.9%;
  height: 200px;
  border: 1px solid black;
  margin: 1px;
  overflow: auto;
  /*will change this to hidden later to deny scolling to user*/
  white-space: nowrap;
}

.right {
  float: right;
  width: 30%;
  height: 200px;
  border: 1px solid black;
}

<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="left">
  left div
  <button id="left-button">
      swipe left
    </button>
</div>
<div class="center" id="content">
  <div class=internal>
    div 1
  </div>
  <div class=internal>
    div 2
  </div>
  <div class=internal>
    div 3
  </div>
  <div class=internal>
    div 4
  </div>
  <div class=internal>
    div 5
  </div>
  <div class=internal>
    div 6
  </div>
  <div class=internal>
    div 7
  </div>
  <div class=internal>
    div 8
  </div>
</div>
<div class="right">
  <button id="right-button">
      swipe right
    </button> right div
</div>