4

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

мобильные

2 ответа 2

3

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

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='button button-left' id="button-left">left</div>

  <div class='content'>
    фдвофвдовдафовжф ы вдофыв жфоыв фывоа фывжаофыва
    фвы фыжваофывэафоывафыво фываофыважфывоафжывофывжа офывафэыва офывжа
    фыжв офвыаж фыовафжы ваофывжа фывоаф ыжвдаофы вжадфоы вафжыдва офывжадо
  </div>
  
  <div class='button button-right' id="button-right">right</div>
</div>

1
  • Большое спасибо, чуть позже буду тестировать
    – vantal
    Commented 19 июл. 2018 в 15:47
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;
}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<div class="slider comp-card__slider">
  <div class="slider__image" style="background-image: url('http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg')"></div>
  <div class="slider__image" style="background-image: url('http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg')"></div>
  <div class="slider__image" style="background-image: url('http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg')"></div>
  <div class="slider__image" style="background-image: url('http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg')"></div>
  <div class="slider__image" style="background-image: url('http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg')"></div>
  <div class="slider__image" style="background-image: url('http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg')"></div>
  <div class="slider__image" style="background-image: url('http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg')"></div>
  <div class="slider__image" style="background-image: url('http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg')"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

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

9
  • Знаю этот плагин, и это не совсем то, что мне нужно. Сформулирую более понятно: мне нужна кнопка вправо, которая появляется если контент есть справа, и кнопка влево, которая появляется если он есть слева, и соответственно чтоб эти кнопки двигали контент. Похоже как кнопка "наверх", которая появляется при листании сайт вниз, только у меня вправо и влево.
    – vantal
    Commented 19 июл. 2018 в 14:05
  • ну а если контента очень много, кнопка всегда должна по клику пролистывать до упора? Commented 19 июл. 2018 в 14:09
  • и принципиально наличие кнопки? что если блок просто будет скролиться пальцем, так же как скролим страницу вверх\вних, только влево\вправо? Commented 19 июл. 2018 в 14:11
  • да, кнопка обязательна (хотя бы чтоб было сразу 2 кнопки вправо-влево, но в идеале, чтоб появлялась только та в в какой стороне есть непоказанный контент), при клике на нее не нужно пролистывать сразу в конец, а только на несколько пикселей
    – vantal
    Commented 19 июл. 2018 в 14:14
  • В принципе ничего сложного, сейчас попробую сформулировать Commented 19 июл. 2018 в 14:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.