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

JavaScript

Christopher Paccione
Christopher Paccione
14,831 Points
Posted by Christopher Paccione
Christopher Paccione
14,831 Points

Slider "onclick" event to change content

I'm running into a web design problem.

I need to create a slider (which I've done with bootstrap), but when the slider is click to switch between slides (there are three of them) The paragraph in the div below the slider needs to change according with the picture above.

So I have there paragraph descriptions, and three photos.

Can anyone point me in the right direction?

I've tried stackoverflow, but I had no luck.

thanks!

3 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

if you are using bootstrap then you can see and example of a slider with moving text here. Without seeing your code I can only assume that your problem is that you did not put the text inside the item div that holds each individual side. If you want the image and the text to transition at the same time then you need to structure your html like this:

<div id="carousel-unique-id" class="carousel slide" data-ride="carousel">
  <!-- bullets at the bottom -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <--! put your image and caption inside the item div -->
      <img src="..." alt="...">
      <div class="carousel-caption">
          <!-- put caption text here-->
      </div>
    </div>
    <div class="item active">
      <--! put your image and caption inside the item div -->
      <img src="..." alt="...">
      <div class="carousel-caption">
          <!-- put caption text here-->
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Andrew,

I could be wrong here but it seems Christopher Paccione wants the paragraph below the image and not as a caption overlay on the image.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

My recommendation would still be to use the built in caption for the slider and reposition the text using css instead of writing custom js/jQuery to reinvent the wheel. Generally, text that changes with a slide is a caption, whether its 200 words or in another part of the page. I always go with KISS on stuff like this. "Does it have the same functionality as a caption? Yes, then treat it like a caption". Here is a website that I did where I used css to move the caption to make it look like a paragraph.

Christopher Paccione
Christopher Paccione
14,831 Points
Christopher Paccione
Christopher Paccione
14,831 Points

Jason you're correct, but Andrew thank you for the example. I was really busy the last two days finishing the website, and I ended up using Flexslider with the caption listed below. It ended up working out nicely, but thank you both for the response, and I'll be sure to check out the linked example.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hey Christopher,

I'm glad you switched sliders. There seems to be a few hurdles you have to overcome if you want that text below with bootstrap carousel. One of them being that Bootstrap doesn't implement equal height slides as far as I can tell. I never posted an answer because I couldn't resolve the problems.

Was it pretty straightforward to do this with flexslider? That's the one from woothemes, correct? I think I started to use that on a project one time but I think it was still fairly early in its creation and maybe hadn't matured enough yet.

I've used jQuery cycle on a few projects and I've been happy with that one.

Christopher Paccione
Christopher Paccione
14,831 Points
Christopher Paccione
Christopher Paccione
14,831 Points

The wootheme flexslider was actually really easy to use, the most difficult part for me was matching the slider layout the designer gave me. It was a simple landing page, and did work out well in the end. You can view the final result here at www.jointheama.com

The main issue was with the 4th slide, because it lacked content below the slider, so I needed the div to dynamically change, and the designer wanted the double chevrons on the outside of the slider.

I have another psd. to html design issue this week, where I have to create a complicated slider, I'm sure I'll post shortly about that one after I exhaust myself at stackoverflow. :)