Slider navigators working very slowly

Question

As I am new to JQuery, I was recently practicing it by creating a simple slider with navigation buttons.

The entire slider is working correctly but the navigation buttons are responding very slowly. When I am clicking on them for the first time, I need to click them twice to make them respond. There is no error on the console. Everything is working correctly, except the navigation button response time.

Thank you for the help in advance.

var slides = document.getElementsByClassName('slide');
var slider_count = 1;
var offset_value;
start();

function left() {

  slider_count--;
  if (slider_count < 0) {
    slider_count = slides.length - 1;
  }
  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);

}

function right() {


  if (slider_count >= slides.length) {
    slider_count = 0;
  }
  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
  slider_count++;
}

function start() {


  if (slider_count == slides.length) {
    slider_count = 0;
  }

  offset_value = slides[slider_count].offsetLeft;
  slider_count++;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
  setTimeout(start, 3000);
}

html,
body,
body * {
  margin: 0;
  padding: 0;
}

#wrapper {
  height: 300px;
  white-space: nowrap;
  overflow: hidden;
}

.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
}

#slide-option-1 {
  background-color: #808080;
}

#slide-option-2 {
  background-color: green;
}

#slide-option-3 {
  background-color: blue;
}

#main {
  position: relative;
}

.nav {
  position: absolute;
  cursor: pointer;
}

#nav-1 {
  left: 10px;
  top: 45%;
}

#nav-2 {
  right: 10px;
  top: 45%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <a id="nav-1" onclick="left()" class="nav">Left</a>
  <div id="wrapper">
    <div id="slide-option-1" class="slide"></div>
    <div id="slide-option-2" class="slide"></div>
    <div id="slide-option-3" class="slide"></div>
  </div>
  <a id="nav-2" class="nav" onclick="right()">Right</a>
</div>

Answer 1

increase setTimeout(start, 9000); so it will slow

var slides = document.getElementsByClassName('slide');
var slider_count = 1;
var offset_value;
start();

function left() {
  slider_count--;
  if (slider_count < 0) {
      slider_count = slides.length - 1;
  }

  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
      scrollLeft: offset_value
  }, 100);

}

function right() {
  if (slider_count >= slides.length) {
    slider_count = 0;
  }

  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 100);
  slider_count++;
}

function start() {
  if (slider_count == slides.length) {
    slider_count = 0;
  }

  offset_value = slides[slider_count].offsetLeft;
  slider_count++;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
  setTimeout(start, 9000);
}

html,
body,
body * {
  margin: 0;
  padding: 0;
}

#wrapper {
  height: 300px;
  white-space: nowrap;
  overflow: hidden;
}

.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
}

#slide-option-1 {
  background-color: #808080;
}

#slide-option-2 {
  background-color: green;
}

#slide-option-3 {
  background-color: blue;
}

#main {
  position: relative;
}

.nav {
  position: absolute;
  cursor: pointer;
}

#nav-1 {
  left: 10px;
  top: 45%;
}

#nav-2 {
  right: 10px;
  top: 45%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <a id="nav-1" onclick="left()" class="nav">Left</a>
  <div id="wrapper">
    <div id="slide-option-1" class="slide"></div>
    <div id="slide-option-2" class="slide"></div>
    <div id="slide-option-3" class="slide"></div>
  </div>
  <a id="nav-2" class="nav" onclick="right()">Right</a>
</div>

Answer 2

initialize slider_count with 0.

var slides = document.getElementsByClassName('slide');
var slider_count = 0;
var offset_value;
start();

function left() {

  slider_count--;
  if (slider_count < 0) {
    slider_count = slides.length - 1;
  }
  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);

}

function right() {

  slider_count++;
  if (slider_count >= slides.length) {
    slider_count = 0;
  }
  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
}

function start() {

  slider_count++;
  if (slider_count >= slides.length) {
    slider_count = 0;
  }

  offset_value = slides[slider_count].offsetLeft;
  $("#wrapper").animate({
    scrollLeft: offset_value
  }, 1000);
  setTimeout(start, 3000);
}

html,
body,
body * {
  margin: 0;
  padding: 0;
}

#wrapper {
  height: 300px;
  white-space: nowrap;
  overflow: hidden;
}

.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
}

#slide-option-1 {
  background-color: #808080;
}

#slide-option-2 {
  background-color: green;
}

#slide-option-3 {
  background-color: blue;
}

#main {
  position: relative;
}

.nav {
  position: absolute;
  cursor: pointer;
}

#nav-1 {
  left: 10px;
  top: 45%;
}

#nav-2 {
  right: 10px;
  top: 45%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <a id="nav-1" onclick="left()" class="nav">Left</a>
  <div id="wrapper">
    <div id="slide-option-1" class="slide"></div>
    <div id="slide-option-2" class="slide"></div>
    <div id="slide-option-3" class="slide"></div>
  </div>
  <a id="nav-2" class="nav" onclick="right()">Right</a>
</div>