Simple product image trailer with jQuery

Here's a short snippet of jQuery I have built to enable an horizontal product trail. It simply calculate the size of the container and the size of each slide, and generate the sliding mechanism to go next and previous. That's it, simple and effective!

HTML

<div id="mattress_slider">
    <div class="mattress_container">
        <div class="mattress_slider">
            <div class="product-list-item" style="background-color:blue;"></div>
            <div class="product-list-item" style="background-color:cyan;"></div>
            <div class="product-list-item" style="background-color:green;"></div>
            <div class="product-list-item" style="background-color:yellow;"></div>
            <div class="product-list-item" style="background-color:orange;"></div>
            <div class="product-list-item" style="background-color:red;"></div>
            <div class="product-list-item" style="background-color:black;"></div>
            <div class="product-list-item" style="background-color:purple;"></div>
        </div>
    </div>
</div>

LESS

#mattress_slider{
    position:relative;
    width:400px;
    margin:0 30px;
    .mattress_container{
        overflow:hidden;
        position:relative;
        height: 100px;
    }
    .mattress_slider{
        position: absolute;
        top:0;
        left:0;
        height: 100px;
    }
    .previous{
        position: absolute;
        text-decoration: none;
        background-image: url('/media/img/arrow-left.png');
        background-repeat: no-repeat;
        display: block;
        width:20px;
        height:54px;
        opacity:0.7;
        &:hover{
            opacity:1;
        }
    }
    .next{
        position: absolute;
        text-decoration: none;
        background-image: url('/media/img/arrow-right.png');
        background-repeat: no-repeat;
        display: block;
        width:20px;
        height:54px;
        opacity:0.7;
        &:hover{
            opacity:1;
        }
    }
    .product-list-item{
        width:100px;
        height:100px;
        float:left;
    }
}

JS

//Mattress slider
$('#mattress_slider').append('<a href="#" class="previous"><</a>');
$('#mattress_slider').append('<a href="#" class="next">></a>');
// How many mattresses
var mattress_count = $('#mattress_slider .product-list-item').length;
var mattress_width = $('#mattress_slider .product-list-item').width();
var slider_width = $('#mattress_slider').width();
// How manay fit in slider
var fits = slider_width / mattress_width;
// How manay are missing
var hidden = mattress_count - fits;
// Adjust slider
$('.mattress_slider').css({'width':mattress_count * mattress_width});
 // Position arrows
$('#mattress_slider .previous').hide().css({'top':50, 'left':-34}).click(function(e){
    e.preventDefault()
    if(hidden < (mattress_count - fits)){
        var passed = mattress_count - fits - hidden;
        // Shift slider by one
        $('.mattress_slider').stop().animate({'left': ((1-passed) * mattress_width)}, 500);
        // Decrement hidden
        hidden += 1;
    }
    // Show or hide controls accordingly
    show_hide_controls();
})
$('#mattress_slider .next').css({'top':50, 'right':-34}).click(function(e){
    e.preventDefault()
    if(hidden > 0){
        var passed = mattress_count - fits - hidden;
        // Shift slider by one
        $('.mattress_slider').stop().animate({'left': -((1+passed) * mattress_width)}, 500);
        // Decrement hidden
        hidden -= 1;
    }
    // Show or hide controls accordingly
    show_hide_controls();
})
function show_hide_controls(){
    if(hidden == 0) $('#mattress_slider .next').hide();
    else $('#mattress_slider .next').show();
    if(hidden == mattress_count - fits) $('#mattress_slider .previous').hide();
    else $('#mattress_slider .previous').show();
}

View on Codepen

< / >