0

I'm using the following code to create a sliding card effect where each "card" is a list element and they slide across the screen. They are only visible within the "stage" I've set with specific height and width. It's working great -- except that, while the cards slide out nicely to the left, they don't perform the same sliding function inwards from the right. Instead, it simply jumps onto the page and looks a bit startling.

Does anyone know how I could get the next list item to slide in from the right instead of simply appearing?

Thanks!

JS:

window.addEvent('domready', function () {
    var totIncrement = 0;
    var increment = 968;
    var maxRightIncrement = increment * (-303); //this is -303 because there are 303 cards, but the example below only has 3
    var fx = new Fx.Style('slider-list', 'margin-left', {
        duration: 300,
        //transition: Fx.Transitions.Back.easeInOut,
        wait: true
    });
    // EVENTS for the button "previous"
    var pbuttons = document.getElementsByClassName('prevButton');
    for(i = 0; i < pbuttons.length; i++) {
        $(pbuttons[i]).addEvents({
            'click': function (event) {
                if(totIncrement > maxRightIncrement) {
                    totIncrement = totIncrement + increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }
        });
    }
    //-------------------------------------
    // EVENTS for the button "next"
    // var buttons = $('.nextButton');
    var buttons = document.getElementsByClassName('nextButton');
    for(i = 0; i < buttons.length; i++) {
        $(buttons[i]).addEvents({
            'click': function (event) {
                if(totIncrement > maxRightIncrement) {
                    totIncrement = totIncrement - increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }
        });
    }
});

HTML:

<div id="slider-stage">
    <ul id="slider-list">
        <li id="l1">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
        <li id="l2">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
        <li id="l3">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
    </ul>
</div>
Bojangles
  • 99,427
  • 50
  • 170
  • 208
Paige Pauli
  • 21
  • 3
  • 1
    What framework is this? You may want to specify that. – Ry- Apr 12 '12 at 00:22
  • At least include some html, a screenshot, a link, whatever... And put more tags. Slider has nothing to do with this... – MarioDS Apr 12 '12 at 00:23
  • I've edited it to include the HTML. Sorry about that! – Paige Pauli Apr 12 '12 at 00:41
  • Could you put a working example up on [jsfiddle](http://jsfiddle.net)? I tried using your code there verbatim but couldn't get it to work at all. – Tikhon Jelvis Apr 12 '12 at 02:31
  • I created an example on jsfiddle, but for some reason it's not working at all just like you said. One thing I forgot to mention last time was that it's pulling from MooTools, but even selecting the proper framework in the jsfiddle sidebar wouldn't make it work. Eventually, I just enlarged the slider-stage and made the margins larger on either side so that there's more visible ground for the card to cover, therefore showing more of the movement instead of simply flashing onto the screen. Thanks for your eagerness to help, though, guys! – Paige Pauli Apr 17 '12 at 20:08

0 Answers0