Нужно сделать горизонтальный скроллинг одного блока на мобильных экранах, а именно, чтобы появлялась стрелка вправо, и влево, если контент будет и слева. Какие есть методы решения?
Прикрепляю скрин, как должно это выглядеть
Ответ
Честное слово, мне очень стыдно за этот код, писал буквально на коленке =\
Может поможет или хотя бы натолкнет на мысль:
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;
}
Комментариев нет:
Отправить комментарий