0
여기에이 문서가 있습니다. https://www.startutorial.com/articles/view/easy-horizontal-scroll-showcase -이 설정은 div > ul > li과 같이 스크롤 할 수 있습니다. 문제는 tr 요소를 스크롤해야한다는 테이블이 있다는 것입니다. 설치가 다음과 같습니다. div > tbody > tr. 아래 코드를 볼 수는 있지만 현재 작동하지 않습니다.jQuery 스크롤 테이블의 수평 요소를
참고 :이 HTML은 WP 플러그인의 고급 사용자 지정 필드에서 가져온 것입니다.
$(document).ready(function() {
//find div
var div = $('div.acf-table');
//find ul width
var liNum = $(div).find('tbody').children('tr').length;
var speed = 1000;
var containerWidth = 848;
var itemWidth = 212;
//Remove scrollbars
$(div).css({
overflow: 'hidden'
});
$('div.right-arrow').click(function(e) {
if (($(div).scrollLeft() + containerWidth) < (liNum * itemWidth)) {
$(div).animate({
scrollLeft: '+=' + containerWidth
}, speed);
}
});
$('div.left-arrow').click(function(e) {
if (($(div).scrollLeft() + containerWidth) > containerWidth) {
$(div).animate({
scrollLeft: '-=' + containerWidth
}, speed);
}
});
});.hs {
width: 912px;
margin: auto;
}
.hs tbody {
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.hs tbody tr {
width: 200px;
margin-right: 12px;
display: inline-block;
}
.acf-table {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 228px;
width: 633px;
/* Add scroll-bars */
overflow: auto;
float: left;
display: block;
}
.left-arrow {
width: 22px;
height: 197px;
display: block;
margin-right: 10px;
float: left;
}
.right-arrow {
width: 22px;
height: 197px;
display: block;
margin-left: 10px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hs">
<div class="left-arrow">
<a href="#prev">
<img src="images/scroller_left.gif" name="scroller_left" width="22" height="197" border="0">
</a>
</div>
<table class="acf-table">
<tbody style="width:99999px;">
<tr>
<td><img src="images/photos/Blue hills.jpg" width="200" height="197" /></td>
</tr>
<tr>
<td><img src="images/photos/Sunset.jpg" width="200" height="197" /></td>
</tr>
<tr>
<td><img src="images/photos/Water lilies.jpg" width="200" height="197" /></td>
</tr>
<tr>
<td><img src="images/photos/Winter.jpg" width="200" height="197" /></td>
</tr>
<tr>
<td><img src="images/photos/Winter.jpg" width="200" height="197" /></td>
</tr>
</tbody>
</table>
<div class="right-arrow">
<a href="#next">
<img src="images/scroller_right.gif" name="scroller_right" width="22" height="197" border="0">
</a>
</div>
</div>