Javascript-форум - Slider прокрутка карусели

нужна прокрутка для слайдера по кругу как в лево так и в право - поблочно....блоки dl в нутри id=slide...за ранее очень благодарен!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#slide-wrapper {
display: inline-block;
width: 694px;
height: 2em;
overflow: hidden;
border: 1px solid #666;
font-family: "Liberation Sans", Arial, sans;
}
#slide {
float: left;
margin: 0;
padding: 0;
width: 90%;
height: 100%;
border-left: 1px solid #666;
border-right: 1px solid #666;
box-sizing: border-box;
overflow: hidden;
}
#slide dl{
position: relative;
float: left;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#slide dl dt{
float: left;
width: 20%;
height: 100%;
text-align: center;
line-height: 1.8em;
border-right: 1px solid #666;
cursor: pointer;
box-sizing: border-box;
background: rgba(249, 114, 85, 1);
}
#slide dl dt:nth-child(5){
border: none;
}
#slide-left, #slide-right{
float: left;
width: 5%;
height: 100%;
text-align: center;
line-height: 1.9em;
cursor: pointer;
box-sizing: border-box;
background: rgba(249, 114, 85, 1);
}
#slide-left:hover, #slide-right:hover, #slide dl dt:hover{
background: rgba(250, 169, 86, 0.8);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script> 
$(document).ready(function(){


});
</script>
</head>
<body>
<dl id="slide-wrapper">
    <dt id="slide-left">&lt;</dt>
    <dt id="slide">        
        <dl><dt>1 серия</dt><dt>2 серия</dt><dt>3 серия</dt><dt>4 серия</dt></dl>
        <dl><dt>6 серия</dt><dt>7 серия</dt><dt>8 серия</dt><dt>9 серия</dt><dt>10 серия</dt></dl>       
        <dl><dt>11 серия</dt><dt>12 серия</dt><dt>13 серия</dt><dt>14 серия</dt><dt>15 серия</dt></dl>
    </dt>
    <dt id="slide-right">&gt;</dt>
</dl>
</body>
</html>