Нужно сделать горизонтальный скроллинг одного блока на мобильных экранах, а именно, чтобы появлялась стрелка вправо, и влево, если контент будет и слева. Какие есть методы решения? Прикрепляю скрин, как должно это выглядеть
2 ответа
Честное слово, мне очень стыдно за этот код, писал буквально на коленке =\ Может поможет или хотя бы натолкнет на мысль:
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>
Подключи слайдер, например, 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>
О более тонкой настройке слайдера почитай в интернетах
-
Знаю этот плагин, и это не совсем то, что мне нужно. Сформулирую более понятно: мне нужна кнопка вправо, которая появляется если контент есть справа, и кнопка влево, которая появляется если он есть слева, и соответственно чтоб эти кнопки двигали контент. Похоже как кнопка "наверх", которая появляется при листании сайт вниз, только у меня вправо и влево.– vantalCommented 19 июл. 2018 в 14:05
-
ну а если контента очень много, кнопка всегда должна по клику пролистывать до упора? Commented 19 июл. 2018 в 14:09
-
и принципиально наличие кнопки? что если блок просто будет скролиться пальцем, так же как скролим страницу вверх\вних, только влево\вправо? Commented 19 июл. 2018 в 14:11
-
да, кнопка обязательна (хотя бы чтоб было сразу 2 кнопки вправо-влево, но в идеале, чтоб появлялась только та в в какой стороне есть непоказанный контент), при клике на нее не нужно пролистывать сразу в конец, а только на несколько пикселей– vantalCommented 19 июл. 2018 в 14:14
-
В принципе ничего сложного, сейчас попробую сформулировать Commented 19 июл. 2018 в 14:19