Горизонтальный скроллинг на мобильных экранах

#javascript #html #css #scroll

Нужно сделать горизонтальный скроллинг одного блока на мобильных экранах, а именно,
чтобы появлялась стрелка вправо, и влево, если контент будет и слева. Какие есть методы
решения?
Прикрепляю скрин, как должно это выглядеть 


    

Ответы

Ответ 1

Честное слово, мне очень стыдно за этот код, писал буквально на коленке =\
Может поможет или хотя бы натолкнет на мысль:



var button_left = $("#button-left");
var button_right = $("#button-right");

button_right.on("click", function(){

	var box = $('.container'); 
	var content = $('.content');
  var box_width = box.width();
  var content_width = content.width();
  var max_scroll = content_width - box_width;
  var cur_scroll = Math.abs(parseInt( content.css('left') ));
  
  if( cur_scroll + 30 < max_scroll ) {
  	content.css('left', '-' + (cur_scroll + 30) + 'px');
  } else {
  	content.css('left', '-' + (max_scroll) + 'px');
  }
  

});


button_left.on("click", function(){

	var box = $('.container'); 
	var content = $('.content');
  var box_width = box.width();
  var content_width = content.width();
  var cur_scroll = Math.abs(parseInt( content.css('left') ));
  
  if( cur_scroll - 30 >= 0 ) {
  	content.css('left', '-' + (cur_scroll - 30) + 'px');
  } else {
  	content.css('left', '0px');
  }
  

});
.container {
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.content{
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200%;
  z-index: 1;
  TRANSITION: .2S;
}

.button {
  CURSOR: POINTER;
  background: #0084ff;
  border: none;
  border-radius: 50%;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  height: 50px;
  position: absolute;
  top: 50%;
  width: 50px;
  z-index: 2;
}
.button-left {
  left: 0px;
}
.button-right {
  right: 0px;
}


  
left

  

    фдвофвдовдафовжф ы вдофыв жфоыв фывоа фывжаофыва
    фвы фыжваофывэафоывафыво фываофыважфывоафжывофывжа офывафэыва офывжа
    фыжв офвыаж фыовафжы ваофывжа фывоаф ыжвдаофы вжадфоы вафжыдва офывжадо
  
  
  
right



Ответ 2

Подключи слайдер, например, slick slider (документация)

Пример работы слайдера:



if ( $.fn.slick ) {
    $('.comp-card__slider').slick({
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 1,
        arrows:true,
        speed: 300,
        variableWidth: false
    });
}
.comp-card__slider .slider__image {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height:120px;
    width:60px;
    margin: 5px;
}



  

  

  

  

  

  

  

  










О более тонкой настройке слайдера почитай в интернетах