Как добавить стрелки влево и вправо к ползунку прокрутки без JQuery и начальной загрузки? - PullRequest
Новая
       47

Как добавить стрелки влево и вправо к ползунку прокрутки без JQuery и начальной загрузки?

0 голосов
/ 16 ноября 2018

как добавить стрелки вправо и влево для скроллера без 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>

Спасибо!

1 Ответ

0 голосов
/ 16 ноября 2018

Вы можете создать две кнопки, что-то вроде этого. 

  <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"; 
}

Надеюсь, это поможет

...