First time using jquery and nothing is working, any tips?

Posted: - Source : stackoverflow

My goal is to create a slideshow that starts as automatic but becomes manual when a user clicks on the forward or back arrows. However, nothing is working right now. I'd really appreciate any help! This is my js file:

// Slideshow
var slideshow = function () {
    "use strict";
    var paused = false;
    $('.arrowR').click(function () {
        paused = true;
        $('#slides > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slides');
    });
    $('.arrowL').click(function () {
        paused = true;
        $('#slides > div:last')
            .fadeIn(1000)
            .prependTo('#slides')
            .next()
            .fadeOut(1000)
            .end();
    });
    setInterval(function () {
        if (paused === false) {
            $('#slides > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slides');
        }
    }, 5000);

};

// Call Functions
$(document).ready(function () {
    "use strict";
    slideshow();
});

And here's the relevant html:

<!-- slideshow -->
<div class="slideshow">
  <button href="#" class="slideshowButton arrowL" style="left: 0%; text-align: left;">&lt;</button>
  <div id="slides">
    <div><img src="resources/slides/slide1.jpg" alt="slide1"/></div>
    <div class="hidden"><img src="resources/slides/slide2.jpg" alt="slide2"/></div>
    <div class="hidden"><img src="resources/slides/slide3.jpg" alt="slide3"/></div>
  </div>
  <button href="#" class="slideshowButton arrowR" style="right: 0%; text-align: right;">&gt;</button>
</div>