右侧jquery自动滚动

Question

我想为这个滑块设置一些自动滚动时间。我能怎么做？ 我尝试过任何东西，但不能认出我的错误。 我只需要当我打开页面时它将自动向右滚动到定时循环（到无限远）。

＆＃13;

＆＃13;

var slider = {

 
  // Not sure if keeping element collections like this
  // together is useful or not.
  el: {
    slider: $("#slider"),
    allSlides: $(".slide"),
    sliderNav: $(".slider-nav"),
    allNavButtons: $(".slider-nav > a")
  },

  timing: 800,
  slideWidth: 320, // could measure this

  // In this simple example, might just move the
  // binding here to the init function
  init: function() {
    this.bindUIEvents();
  },

  bindUIEvents: function() {
    // You can either manually scroll...
    this.el.slider.on("scroll", function(event) {
      slider.moveSlidePosition(event);
    });
    // ... or click a thing
    this.el.sliderNav.on("click", "a", function(event) {
      slider.handleNavClick(event, this);
    });
    // What would be cool is if it had touch
    // events where you could swipe but it
    // also kinda snapped into place.
  },

  moveSlidePosition: function(event) {
    // Magic Numbers =(
    this.el.allSlides.css({
      "background-position": $(event.target).scrollLeft() / 6 - 100 + "px 0"
    });
  },

  handleNavClick: function(event, el) {
    event.preventDefault();
    var position = $(el).attr("href").split("-").pop();

    this.el.slider.animate({
      scrollLeft: position * this.slideWidth
    }, this.timing);

    this.changeActiveNav(el);
  },

  changeActiveNav: function(el) {
    this.el.allNavButtons.removeClass("active");
    $(el).addClass("active");
  }

};

slider.init();


// Originally added click links, so I ported over and re-wrote

＆＃13;

@media screen and (max-width:650px) {
.slider-wrap {
    width: 149% !important;

    margin: 20px auto;
}
}
@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap {
  width: 100%;

  margin: 20px auto;
}

.slider {
  overflow-x: scroll;
}

.holder {
display:block;  width: 600%;position:relative;
}

.slide {
  float: left;
  width: 300px;
  height: 200px;
  position: relative;
  background-position: -100px 0;
margin-left:20px;
}

.temp {
  position: absolute;
  color: white;
  font-size: 40px;
  bottom: 15px;
  left: 15px;
  font-family: 'Josefin Slab', serif;
  font-weight: 100;

}

#slide-0 {
  background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important;     background-repeat: no-repeat;background-size: 95%;
}

#slide-1 {
  background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important;     background-repeat: no-repeat;background-size: 95%;
}

#slide-2 {
  background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important;     background-repeat: no-repeat;background-size: 95%;
}
#slide-3 { background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important;     background-repeat: no-repeat;background-size: 85%;}


.slide:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(transparent, black);

}

.slider-nav {
  text-align: center;
  margin: 10px 0 0 0;
}

.slider-nav a {
  width: 10px;
  height: 10px;
  display: inline-block;
  background: #ddd;
  overflow: hidden;
  text-indent: -9999px;
  border-radius: 50%;
}

.slider-nav a.active {
  background: #999;
}

＆＃13;

<h1 align="middle">Title</h1>
<div class="slider-wrap">
  <div class="slider" id="slider">
    <div class="holder">
    <a href="http://itafsaliafsapfsaower.it/"><div class="slide" id="slide-0"><span class="temp">Itsfsr</span></div></a>
      <a href="http://www.efasdenasfenergy.it/"><div class="slide" id="slide-1"><span class="temp">Edsfasgy</span></div></a>
        <a href="http://www.unfasifasfna.it/home"><div class="slide" id="slide-2"><span class="temp">Fesfa II</span></div></a>
    <a href="http://www.soltfasigasfua.com/it/"><div class="slide" id="slide-3"><span class="temp">Solfsagua</span></div></a>
  

    </div>
  </div>
  <nav class="slider-nav">
    <a href="#slide-0" class="active">Slide 0</a> 
    <a href="#slide-1">Slide 1</a> 
    <a href="#slide-2">Slide 2</a> 
<a href="#slide-3">Slide 3</a> 
  </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;