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.

JavaScript

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

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

2 Answers

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

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.