Responsive slider doesn't work

Question

So I'm new to JQuery and JS and I'm trying to make a basic slider but it doesn't work and I can't figure out why. If you can point me to the right direction I would be really greatful.

Here is my code

    <section class="slider">
      <div class="slider-wrapper">
        <ul class="slide-list">
          <li><img src="http://placehold.it/350x150" alt="img"></li>
          <li><img src="http://placehold.it/350x150" alt="img"></li>
          <li><img src="" alt=""></li>
        </ul>
        <a href="#" class="prev">Prev</a>
        <a href="#" class="next">Next</a>
      </div>
    </section>

my SASS

section.slider
    background: $burnt-sienna
    margin: 0
    .slider-wrapper
        width: 80%
        margin: 0 auto
        overflow: hidden
        position: relative
        text-align: center 
        .slide-list
            list-style: none
            display: block
            width: auto
            white-space: nowrap
            font-size: 0
            padding: 0
            li
                display: inline-block
                img
                    display: block
                    height: auto
                    nax-width: 100%
        a.prev
            position: absolute
            top: 50%
            left: 5%
        a.next
            position: absolute
            top: 50%
            right: 5%   

my JQuery

 $(function(){
$('.prev, .next').on('click', function(){
    var $wrapper = $('.slider-wrapper');
    var width = $wrapper.width();
    $wrapper.animate({
        scrollLeft: $(this).hasClass('prev') ? '-='+width : '+='+width
    },300);
    return false;
});
});