CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Muhammed Bhikha
Muhammed Bhikha

Reputation: 4999

Change multiple element contents/background depending on slider contents

I have made an image using photoshop of a mock design of the page so you can visually see what I am trying to achieve.

Please look at the image at the end of this question whilst trying to answer.

Updated Question: At this moment in time I have no code, I was wondering if someone could point me in the correct direction. I am making an online application using Ruby on Rails. At this moment I am not worried about the Rails side, I firstly want to conquer the JQuery. I have six sauces, each with a name, a picture, and a desctiption. What I want to achieve is the page starts on sauce one as shown in the picture, when the right arrow is clicked, sauce number 1 becomes sauce number 2, the picture changes, and the relevant description changes (i.e. sauce number 2's description.

My main problem is I do not know how to fit the relevent content between the two arrows, and then get them to change as the arrows are pressed. I.e. the user can click the right arrow once and I can change the contents, but how to I set the jQuery so that when the arrow is clicked the second time, it becomes the second sauce, the third time the third sauce and so on, as in chronological order, so when they click the back arrow it goes to the sauce before the current one.

In a nutshell everything happens dynamically, not that I have divs all ready, and the JQuery just truncates through them (i.e. not a Jquery div slider).

Here's the image:

The image

Upvotes: 0

Views: 354

Answers (2)

sbonkosky
sbonkosky

Reputation: 2557

I would recommend using an already made jQuery slider, like this one:

http://basic-slider.com/

For each li used in the slider, have a div with the image and description. You would need to modify the slider css a little bit but I think it would be a lot easier than making a slider yourself.

Upvotes: 1

Jan
Jan

Reputation: 5815

These are a good start for achieving what you want with jquery:

Animate: http://api.jquery.com/animate/

Capture a click: http://api.jquery.com/click/

Show/hide elements: http://api.jquery.com/show/ http://api.jquery.com/hide/

Set the html of an element: http://api.jquery.com/html/

If you have a problem with anything specific with these functions, you can ask again or just search Stackoverflow, there's a good chance whatever questions you might have have been answered already.

Upvotes: 0

Related Questions