Анимация для прокрутки блоков вперед и назад

207

26 мая 2018, 12:50

Имеется такая вот ячейка в таблице, в которой находятся блоки. Все они не вмещаются по ширине ячейки и необходимо добавить функционал прокрутки вперед и назад.

Никогда до сегодняшнего дня такого не делал и способов решения такой задачи не знаю. Первое, что пришло в голову:

Задать ширину блока, в котром находятся все элементы, как ширинаЭлемента * количествоЭлементов + отступы.
Задать блоку overflow: hidden;
При нажатии на стрелку вперед блоку, содержащему элементы, делать что-то вроде: margin-left: ширинаЭлемента. Стрелка назад - тоже самое, но margin-right;

Может быть существуют более очевидные способы решения такой задачи? Спасибо!

Answer 1

Вы все верно думаете. Только не margin используйте, а .scrollLeft и .scrollRight по клику с шагом по ширине внутреннего блока.

var holder = $(".inner-cont"); 
var scrollstep = 68; 
 
$(".left").bind("click", function(event) { 
  event.preventDefault(); 
  holder.animate({ 
    scrollLeft: "-=" + scrollstep + "px" 
  }); 
}); 
$(".right").bind("click", function(event) { 
  event.preventDefault(); 
  holder.animate({ 
    scrollLeft: "+=" + scrollstep + "px" 
  }); 
});

* { 
  margin: 0; 
  padding: 0; 
} 
 
.cont { 
  position: relative; 
  width: 200px; 
  height: 60px; 
  padding: 0 35px; 
  margin: 60px auto; 
} 
 
.inner-cont { 
  white-space: nowrap; 
  overflow: hidden; 
} 
 
.inner { 
  display: inline-block; 
  width: 60px; 
  height: 60px; 
  margin: 0 2px; 
  background: #eee; 
} 
 
.left, 
.right { 
  position: absolute; 
  top: 0; 
  text-align: center; 
  width: 30px; 
  line-height: 60px; 
  height: 60px; 
  background: #eee; 
  cursor: pointer; 
} 
 
.left { 
  left: 0; 
} 
 
.right { 
  right: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="cont"> 
  <div class="left">←</div> 
  <div class="inner-cont"> 
    <div class="inner" style="background:red"></div> 
    <div class="inner" style="background:green"></div> 
    <div class="inner" style="background:blue"></div> 
    <div class="inner" style="background:orange"></div> 
    <div class="inner" style="background:tomato"></div> 
  </div> 
  <div class="right">→</div> 
</div>