Question

http://frontend.iwssites.com/intellichoice/home.html

I am trying to add functionality to the main slider on this page. Right now there are left/right arrows and grey/blue boxes (below) that let the user navigate between 4 slides (using two image for the 4 slides–so they repeat). What I want to do is add the same functionality to the 4 box graphics (nextaire, save energy, etc.) so that when a user clicks on one of those graphics they are taken to that slide. As well, want the blue/grey box below to correspond with the slide. I do have “on/blue” states for each graphic as well (what the nextaire one has now).

This is kinda tricky and my jquery skills aren’t super up to par. I was thinking that perhaps there was a way in the functions.js file to create this.

Answer 1

Okay, this actually isn’t all that difficult. You have a couple options, depending on how you implemented the slider (I don’t have time to look in your code file, sorry):

• Method one: you use JS to animate the elements to the left by (-1 * indexOfSlideAnimatingTo * slideWidth)
  • this is the best solution in my opinion, as it is lightweight and very simple
  • this will only work if you used position relative to make the slide work
• Method two: you use JS to animate the elements’ margin-left by (-1 * indexOfSlideAnimatingTo * slideWidth)
  • if you did not use position relative
  • what makes this worse than method one is that you will also have to design an exception condition (or a different handler) for when you click to go back to the first slide
    • with the other solution, it simply moves you back TO the 0 position relative to the original
    • with this solution, you have to move back all they way to the beginning by adjusting the margin

Here is the animate function for the first one:

var move = (-1 * indexOfSlideAnimatingTo * slideWidth);
("#yourSlidesRelativeContainer").animate({ left: move }, speed);

The second one would be very similar, but with the extra condition/handler that we talked about and with margin-left instead of just left. I’ll leave that one to you to code, unless you need more help 😉

Good Luck! 🙂