<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>롤링예제(가로)</title>
<script src="../JS/jquery.min.js"></script>
<script src="../JS/rolling.js"></script>
<script src="https://kit.fontawesome.com/4bb639362a.js" crossorigin="anonymous"></script>
<script>
var id;
$(function(){
id=rollingLeft('.contents-box','li',800,1000);
$('.view-box').hover(function(){
clearInterval(id);
}, function(){
id=rollingLeft('.contents-box','li',800,1000);
});
$('.next-btn').click(function(){
var width = $('.contents-box li').first().width();
$('.contents-box li').first().animate({'margin-left':-width+'px'},800,function(){
$(this).detach().appendTo('.contents-box').removeAttr('style');
})
})
$('.prev-btn').click(function(){
var width=$('.contents-box li').first().width();
$('.contents-box li').last().detach().prependTo('.contents-box')
.css('margin-left',-width+'px').animate({'margin-left':0},800);
})
})
</script>
<style>
.view-box{
height: 50px; position: relative; margin: 0 40px;
}
.inner-box{
height: 50px; border: 2px solid black; overflow: hidden;
}
.contents-box{
width: 400%; list-style: none; padding: 0; margin: 0;
}
.contents-box::after{
display: block; clear: both; content: '';
}
.contents-box li{
height: 50px; line-height: 50px; width: 25%; float: left;
background: lightskyblue; text-align: center;
}
.prev-btn, .next-btn{
width: 40px; height: 40px; border-radius: 50%; background: orange;
position: absolute; top: 6px; left: 0; margin-left: -21px;
text-align: center; line-height: 40px; cursor: pointer;
}
.next-btn{
left: auto; right: 0; margin-left: 0; margin-right: -20px;
}
</style>
<body>
<div class="view-box">
<div class="btn-box">
<div class="prev-btn"><i class="fas fa-chevron-left"></i></i></div>
<div class="next-btn"><i class="fas fa-chevron-right"></i></i></div>
</div>
<div class="inner-box">
<ul class="contents-box">
<li>박스1</li>
<li>박스2</li>
<li>박스3</li>
<li>박스4</li>
</ul>
</div>
</div>
</body>
</html>