We help IT Professionals succeed at work.

Need Assistance Debugging Javascript

tmonteit
tmonteit asked
on
I have a web page that is using the javascript slider library.  The page shows a link of several blocks of text that slide back and forth.  There is also a menu on the left hand side.  Underneath the slides there is automatically generated a [1,2,3,4] for scrolling the slides.  

I am trying to make the menu on the left hand side control the slides rather than the auto-generated [1,2,3,4].   I also want the auto-generated [1,2,3,4] to go away completely.

I am not sure how to accomplish this.

I have a live example running here:  http://107.22.173.10/

Also, for reference, I used some code that came from:  http://slidesjs.com/examples/linking/   The page seems to use some Hash #1, #2 to select different slides from a link.  But when I try it it doesn't work.   See the code below, when I uncomment out the animationComplete block the entire thing breaks and I see nothing.

How do I get rid of the auto-generated [1,2,3,4] and use my links to make the slide-in effect work with my own text as the slides?


$(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,
                generatepagination:false
                // If I uncomment the following, the whole thing breaks and I see no slides.
                /*animationComplete: function(current){
                     // Set the slide number as a hash
                     //window.location.hash = '#' + current;
                } */
        });
    });

Open in new window

Comment
Watch Question

Senior Web Developer
Commented:
I think your variable  declared in your jquery function have
var startSlide = 1;
so that is being print you may have removed the nav icons of the slide that is http://slidesjs.com/examples/linking/img/pagination.png 
Manage the pagination image.
I mean add this style:

.pagination {
	margin:26px auto 0;
	width:100px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

Open in new window