Question

I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.

I have a live example running at: http://107.22.173.10
Note that when you click the “GOTO” links nothing happens.

The basic code is as follows and it seems the page is supposed to automatically put ‘#’ anchors in to trigger the slides. I can’t make this work, or figure out how to debug this.

$(function(){
    // Set starting slide to 1
    var startSlide = 1;
    // Get slide number if it exists
    if (window.location.hash) {
       startSlide = window.location.hash.replace('#','');
    }
    // Initialize Slides
    $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            generatePagination: true,
            //play: 5000,
            //pause: 2500,
            hoverPause: true,
            // Get the starting slide
            start: startSlide,
            animationComplete: function(current){
                    // Set the slide number as a hash
                    window.location.hash = '#' + current;
            }
    });
});

Does anyone see what’s going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!

Answer 1

You’re not following the example from slidesjs.com. See “Basic HTML structure”. You’re putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won’t work with the animation code.

Copy paste the example first, then start adding your own tweaks concerning style.