Cannot capture swipe event in scrollableview to change button state within a view

Question

This is my first question so please be kind to me. In Appcelerator I have an Alloy/MVC app where I am using a scrollableview. I have created a custom button bar on the bottom of the screen that is contained in a separate view. If I click a button I can get it to change the button graphic and move to that page, but I cannot seem to figure out how to change the button graphic after swiping to another page. I have tried using event listeners on both the scrollableview and it's parent window, and it will capture(alert) the 'up' and 'down' scroll events, but will not capture the 'left' and 'right' events. It seems as though those events are somehow coded to only be tied to the pagination of the scrollable view. My goal is to capture a left/right event, then use that to fire a function that changes the button graphic. Does anyone have an idea of how to either capture the event or work around the problem?

Here is a sample of the code:

index.xml

<Alloy>
    <Window id="mainWindow">
        <ScrollableView id="contentView">
            <Require src="myController0"/>
            <Require src="myController1"/>
            <Require src="myController2"/>
            <Require src="myController3"/>
        </ScrollableView>
        <View id="navBarBackground"/>
        <Button id="b0" onClick="button0"/>
        <Button id="b1" onClick="button1"/>
        <Button id="b2" onClick="button2"/>
        <Button id="b3" onClick="button3"/>
    </Window>
</Alloy>

index.js

$.contentView.addEventListener('swipe', function(e){
alert(e.direction);
});

Any suggestions will be much appreciated. Thanks.