Need Assistance Debugging Javascript

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

tmonteitAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jagadishwor DulalBraces MediaCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.