如何在没有jQuery和Bootstrap的情况下向左右箭头添加滚动条？

Question

如何在不使用jQuery或引导程序的情况下为滚动条添加左右箭头？

如何在水平滚动条下方添加左右箭头。没有jQuery或引导程序。谢谢。

滚动条现在适合移动设备并且可以用手指滚动

有什么主意吗

赞：-<>

演示图片：-https://ibb.co/mmPWLL

#card_slider {
  clear: both;
  overflow-y: hidden;
  overflow-x: scroll;
  height: 235px;
  margin-top: 20px;
  position: relative;
  padding-left: 5px;
  padding-top: 0px;
}

#card_slider::-webkit-scrollbar {
  height: 5px;
}

#card_slider::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  border-radius: 0px;
}

#card_slider::-webkit-scrollbar-thumb {
  background-color: #5d646c;
  border-radius: 0px;
}

#card_track {
  position: absolute;
  width: 2000px;
}

.subject_card {
  border-radius: 8px;
  height: 215px;
  width: 178px;
  background-color: #fff;
  color: #5d646c;
  float: left;
  margin-right: 20px;
  display: inline;
  box-shadow: 0px 2px 4px 0px rgb(82, 82, 88);
}

.subject_card > img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 178px;
  height: 135px;
  display: block;
}

.subject_card > p {
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 5px;
  overflow: hidden;
  max-height: 60px;
}

<div id="card_slider">
  <div id="card_track">
    <a href="  ">
      <div class="subject_card">
        <img src="  " />
        <p>Title #1</p>
      </div>
    </a>
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #2</p>
      </div>
    </a>
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #2</p>
      </div>
    </a>
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #2</p>
      </div>
    </a>
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #2</p>
      </div>
    </a>
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #2</p>
      </div>
    </a>
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #2</p>
      </div>
    </a>
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #2</p>
      </div>
    </a>
    
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #3</p>
      </div>
    </a>
    <a href="  ">
      <div class="subject_card">
        <img src=" " />
        <p>Title #4</p>
      </div>
    </a>
  </div>
</div>

谢谢！

Answer 1

您可以创建两个按钮，类似这样。

  <button  onclick="showImage(-1)">&#10094;</button>
  <button  conclick="showImage(+1)">&#10095;</button>

并编写类似这样的javascript函数以选择图像

function(showImage(n){
var y;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1} 
if (n < 1) {slideIndex = x.length} ;
for (y= 0; y < x.length; y++) {
    x[y].style.display = "none"; 
}
x[slideIndex-1].style.display = "block"; 
}

希望有帮助