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

Anthony Collins
Anthony Collins
3,837 Points
Posted by Anthony Collins
Anthony Collins
3,837 Points

Slider captions

Hi guys,

Had great success with this forum before so thought I'd try again. I'm currently in the process of redoing our site (http://themarketingcampaigncompany.co.uk/) using Bootstrap. As you can see if you visit this link there's a background slider. I've successfully installed a jquery plugin called Backstretch (https://github.com/srobbin/jquery-backstretch), which is working great.

The problem Im having is getting the captions to work how they do on our current homepage. How can I get the divs to replace each other in sequence when the slider activates? There are backstretch.before and backstretch.after events, which I've successfully hooked into to make sure they work.

Additionally I can use Animate.css for the transitions, so addClass and removeClass would probably be useful for this. Any help would be really appreciated!

Thanks, Anthony

mikes02
mikes02
Courses Plus Student 16,968 Points

Would you be able to post your code so it can be reviewed?

2 Answers

Anthony Collins
Anthony Collins
3,837 Points
Anthony Collins
Anthony Collins
3,837 Points

Hi mike02,

Thanks for the quick reply! Here's my main index file (I'm building on a local install of Wordpress):

<?php /**

  • @package Bootstrap_TMCC */

get_header(); ?>

<div class="container"> <div class="col-md-6"> <div class="row"> <div id="HomeAbout" class="HomeBox"> TEST </div> </div>
<div class="row"> <div id="HomeAdSpace" class="HomeBox"> TEST </div> </div>
<div class="row"> <div id="HomeNewBlog" class="HomeBox"> TEST </div> </div>
</div> <div class="col-md-6"> <div id="captionone" class="home-caption animated active fadeIn"> <p class="main" style="background: #44c57c;">TEST 1</p> <p class="see-more">See More</p> </div> <div id="captiontwo" class="home-caption animated collapse"> <p class="main" style="background: #44c57c;">TEST 2</p> <p class="see-more">See More</p> </div> <div id="captionthree" class="home-caption animated collapse"> <p class="main" style="background: #44c57c;">TEST 3</p> <p class="see-more">See More</p> </div> </div>

</div> </div> <!-- END BG Carousel --> <script> $.backstretch([ "http://localhost/themarketingcampaigncompany.co.uk/wp-content/uploads/2015/01/slide01.jpg", "http://localhost/themarketingcampaigncompany.co.uk/wp-content/uploads/2015/01/slide02.jpg", "http://localhost/themarketingcampaigncompany.co.uk/wp-content/uploads/2015/01/slide03.jpg"
], {duration: 5000, fade: 750});

</script>

Let me know if this is enough to go on :).

Thanks!

Anthony Collins
Anthony Collins
3,837 Points
Anthony Collins
Anthony Collins
3,837 Points

Sorry for second post, but just made a slight change to the code:

<div id="homecontainer" class="row"> <div class="container"> <div class="col-md-6"> <div class="row"> <div id="HomeAbout" class="HomeBox"> TEST </div> </div>
<div class="row"> <div id="HomeAdSpace" class="HomeBox"> TEST </div> </div>
<div class="row"> <div id="HomeNewBlog" class="HomeBox"> TEST </div> </div>
</div> <div class="col-md-6"> <div id="captionone" class="home-caption animated active fadeIn"> <p class="main" style="background: #44c57c;">TEST 1</p> <p class="see-more">See More</p> </div> <div id="captiontwo" class="home-caption animated collapse"> <p class="main" style="background: #44c57c;">TEST 2</p> <p class="see-more">See More</p> </div> <div id="captionthree" class="home-caption animated collapse"> <p class="main" style="background: #44c57c;">TEST 3</p> <p class="see-more">See More</p> </div> </div> </div> </div> </div> <!-- END BG Carousel --> <script> $("#homecontainer").backstretch([ "http://localhost/themarketingcampaigncompany.co.uk/wp-content/uploads/2015/01/slide01.jpg", "http://localhost/themarketingcampaigncompany.co.uk/wp-content/uploads/2015/01/slide02.jpg", "http://localhost/themarketingcampaigncompany.co.uk/wp-content/uploads/2015/01/slide03.jpg"
], {duration: 5000, fade: 750});

</script>

Just so the slider is attached to a block-level object and no the body.