Javascript滑块计数器触发一次

Question

我通过制作滑块来学习JS / JQuery。
问题是我的计数器应该每次增加-980px，仅保持在-980px。我认为它发生是因为它只被触发一次。什么是问题，为什么它只达到-980px？

<div id="wrapper" class="group">
    <div id="slider">
        <ul id="slide_effect" class="group" style="height: 337px; width: 3920px;">
            <li class="slides" name="slide1">
                <img src="img/easiest_way_to.jpg" />
            </li>
            <li class="slides" name="slide2">
                <img src="img/enterprise_solutions.jpg" />
            </li>
            <li class="slides " name="slide3">
                <img src="img/find_out_how.jpg" />
            </li>
            <li class="slides" name="slide1">
                <img src="img/transactional-email-service-2.jpg" />
            </li>
        </ul>
    </div>
    <button id="leftBtn">Back</button>
</div>

jQuery(document).ready(function ($) {
    var backBtn = $('#leftBtn');
    backBtn.on('click', function () {
        var slideEffect = $('#slide_effect');
        function setWidth() {
            var width = 0;
            function calcWidth() {
                width -= 980;
                return width;
            }
            return calcWidth;
        }
        var bannerWidth = setWidth();
        var translate = "translate3d(" + bannerWidth() + "px, 0,0)";
        slideEffect.css({
            'transform': translate
        });
    });
});