horizontal list centered

by Soviut

HTML

<div class="pagination">
    <ul class="pages">
        <li></li>
        <li></li>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="center"></div>

<a class="prev">prev</a>
<a class="next">next</a>

CSS

body {
    padding: 0;
    margin: 0;
}

.pagination {
    position: relative;
    height: 50px;
    background: red;
}

/*
    width: calc(50px * 7);
    transform: translateX(calc(-100% / 7 * 2.5));
*/

.pages {
    position: relative;
    top: 0;
    left: 50%;
    padding: 0;
    margin: 0;

    list-style: none outside;
    overflow: hidden;
}

.pages li {
    float: left;
    width: 50px;
    height: 50px;
    
    background: blue;
}

.pages li.current {
    background: green;
}

.center {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 50px;
    height: 10px;
    
    transform: translateX(-50%);
    background: black;
}

a {
    padding: 10px;
    cursor: pointer;
}

JavaScript

$(function() {
    var $pages = $('.pages');
    var $children = $pages.children();

    var totalWidth = 0;
    var pageCount = $children.length;

    $children.each(function(i, page) {
        totalWidth += $(page).width();
    });
    console.log('total width', totalWidth);

    function changeIndex(index) {    
        var offset = 1.0 / pageCount * (index + 1 - 0.5);
        console.log('offset', offset);
        
        $pages.css({
            width: totalWidth,
            transform: 'translateX(-' + (offset * 100) + '%)'
        });
        
        $children.removeClass('current');
        $children.eq(index).addClass('current');
    }

    var index = 0;
    changeIndex(index);
    
    $('.prev').on('click', function() {
        index--;
        changeIndex(index);
    });

    $('.next').on('click', function() {
        index++;
        changeIndex(index);
    });
});