Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Simonne Brown
Simonne Brown
4,539 Points

Changeable Slider Content

Hi Everyone!

I have been looking for my own solution to this question for a while, and I have finally decided to reach out to the greater powers that be - the forums.

In my 'dream portfolio website', I would like to have a one-page site, with a main portfolio slider. My vision is that the slider would remain in the same position, but depending on which thumbnail you click underneath it, the content in the slider would only display slides for that particular piece/product. The content of the slider would dynamically change based on which piece the user has selected.

Currently on my site, I have ten sliders positioned off screen, and when a thumbnail is clicked, they rotate on/off the screen. However, as you would expect, this greatly slows down the browser performance and is less-than-favourable on a phone (it works - it's just slow and buggy).

I've been looking everywhere for a slider that could do this (or something similar) and have had no luck. Have any of you seen a slider with this functionality?

(I made a terrible diagram of what it looks like in my brain here)

Hi, do you have any websites like this that you have seen as an example. Maybe ajax would be something to look at to change the content.

1 Answer

Jeremy Germenis
Jeremy Germenis
29,854 Points

You could use jQuery's .html() function to replace the content with an on click event. Or, you could use jQuery / AJAX and place the other sliders in a separate file and pull the content into the page and replace the current slider.

Simonne Brown
Simonne Brown
4,539 Points

Ah! See, I never even thought of using ajax - I was just looking for a mythical, non-existent slider. Starting to work on it now using the simple tutorial on CSS-tricks :) http://css-tricks.com/dynamic-page-replacing-content/

Thanks for your quick reply!