Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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!