jquery中如何实现一个li里面一排6张图片进行切换

本人前端小白，近日遇见这个需求不分多个li，把图片放在一个li里面操作(为后端哥们考虑，方便后端哥们操作O(∩_∩)O)，见效果图
第一页

点击之后下一页

可根据内容动态生成可点击的页数比如一页6张图，我这里只有11张所以不能点击下一页了，如果是13张图的话还可以点击的。
html代码

<div class="slider">
    <ul class="clearfix">
        <li>
            <a href="#"><img src="../test2/images/Ture-pic1.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/Ture-pic2.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/Ture-pic3.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/Ture-pic4.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/Ture-pic5.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/Ture-pic6.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/preduct1.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/preduct2.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/preduct3.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/preduct3.jpg" alt=""></a>
            <a href="#"><img src="../test2/images/preduct3.jpg" alt=""></a>

        </li>
    </ul>
    <!--箭头-->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
</div>

css代码

     .slider{
            position: relative;
        }
         .slider ul{

            height: 500px;
            background:#FFFFFF;
            box-shadow: 3px 3px 24px 0px rgba(122,16,29,0.14);
            border-radius: 10px;
            margin-top:60px;
            overflow:hidden;
        }
         .slider ul li a{
            float:left;
            line-height: 500px;
            margin-left:55px;
        }
         .slider ul li a{
            margin-left:53px;
        }
         .slider ul li a img{
             width: 100px;
             height: 200px;
             display: inline-block;
             margin-left:42px;
         }
         .arrow .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            right:0px;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }
         .arrow .arrow-left{
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }
         .arrow .arrow-left:hover,
         .arrow .arrow-right:hover {
            background-color: rgba(0, 0, 0, .5);
        }

js代码

<script src="../lib/jquery/jquery.js"></script>
<script>
    $(function () {
        var count = 6;
        var num =0;
        var length = $(".slider ul>li>a").length;//获取长度
        var width =Math.ceil(length/6);//获取需要的页数
        $(".arrow-right").on("click",function(){
            console.log($('.slider ul >li>a').slice(num,count));
            if(count >= length){
                count = width*6-6;
                num = count - 6;
            }
            $('.slider ul >li>a').slice(num,count).css("display","none");
            count +=6;
            num += 6;
            console.log(num);
            console.log(count);

        });
        $(".arrow-left").on("click",function(){
            count -=6;
            num -= 6;
            $('.slider ul >li>a').slice(num,count).css("display","block");
            console.log(num);
            console.log(count);
            if(num <=0){
                num = 0;
                count =6;
            }
        })


    });
</script>