如何将滚动条置于垂直位置，以及如何使用向上和向下箭头移动图像？

Question

我很难将滚动条放在垂直位置而不是水平位置。另外，我想向上滑动图像  键盘的上下箭头键。请帮我，我有一个  作业到期。多谢您的协助。 有关更多信息，请检查我的代码进入jsfiddle https://jsfiddle.net/mgj7hb0k/

下面的代码来自HTML文件

<div class="slider-wrap">
  <div class="slider" id="slider">
    <div class="holder">
      <div class="slide" id="slide-0"><span class="temp">74°</span></div>
      <div class="slide" id="slide-1"><span class="temp">64°</span></div>
        <div class="slide" id="slide-2"><span class="temp">82°</span></div>
    </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> 
  </nav>
</div>

CSS file. I have added some styles into separate css file.The "slider" (visual container) and the slides need to have explicity the same size. We'll use pixels here but you could make it work with anything.

@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);

.slider-wrap {
  width: 300px;
  height: 500px;
  margin: 20px auto;
}

.slider {
  overflow-x: scroll;
}

.holder {
  width: 300%;
}

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

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

#slide-0 {
  background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}

#slide-1 {
  background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}

#slide-2 {
  background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}

.slide:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  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;
}

我们将在这里使用jQuery，因为我们热爱生活。我们的目标是在滚动时调整幻灯片的背景位置。我们可以在CSS中以百分比形式设置背景位置，但是仅靠这一点并不能达到我们想要的炫酷的隐藏/显示效果。根据滚动量（可以在JavaScript中测量），我们将调整背景位置。一个人，看起来像这样：

Js file  
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: 300, // 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();