Troubleshooting a jQuery code to change CSS onclick
<p>This was my first go at writing some jQuery code completely from scratch, so aside from the fact that I went wrong somewhere, I'm also not sure if this is the best way to do what I'm trying to do. Here goes!</p>

<p>I'm using <a href="http://swipejs.com/" rel="nofollow">jQuery Swipe.js</a> to control a slider on a mobile site. The slider contains 3 divs. I also have some left/right arrow buttons that a user can click that calls the Swipe function. </p>

<p>I want to hide/show some divs when the swipe action is called, depending on what is currently in the viewport. I've tried to do this using a simple variable, <code>i</code>, which is added/subtracted from depending on the current page the user is viewing.</p>

<p>The original script to call the swipe.js function was simply <code>var slider = new Swipe(document.getElementById('slider'));</code></p>

<p>The script code that I wrote is this: <strong>//EDIT: Updated after reviewing the Swipe documentation</strong></p>

<pre><code>var slider = new Swipe(document.getElementById('slider'), {
      callback: function() {

        var pageNumber = slider.getPos();
        if (pageNumber = 0) {
            $(".leftArrow").css("display", "none");
            $("footer#about").css("display", "none");       
            $("footer#adFooter").css("display", "none");
        }

        else if (pageNumber = 1) {
            $(".leftArrow").css("display", "inline");
            $("footer#adFooter").css("display", "inline");          
            $("footer#about").css("display", "none");

        }

        else if (pageNumber = 2) {
            $("footer#adFooter").css("display", "none");        
            $("footer#about").css("display", "inline");
        }     
    }
});
</code></pre>

<p>The HTML code is this:</p>

<pre><code>&lt;a href='#' onclick='slider.prev(); return false;'&gt;&lt;img class="leftArrow" src="img/arrow_right.png" alt="Left Nav Arrow"/&gt;&lt;/a&gt;
&lt;a href='#' style="" onclick='slider.next(); return false;'&gt;&lt;img class="rightArrow" src="img/arrow_right.png" alt="Right Nav Arrow"/&gt;&lt;/a&gt;
</code></pre>

<p>I can't exactly see where I've gone wrong here, but evidently the whole thing isn't working. Thoughts?</p>
