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

Posted by Chad Ralston
Chad Ralston
1,123 Points

JQuery Plugin - Responsive Slider - Using for Page Background

I've been trying to translate the code for the Smells Like Bakin' slider to a full background slider and think that my Javascript is wrong because the background images loaded before I added the Javascript (indicating the image links were okay), but after including the Javascript, my page becomes blank. Thanks in advance for any guidance!

My HTML and Javascript are:

<body>

<div class="wmuSlider"> <div class="wmuSliderWrapper"> <article class="bg-slider-1"> </article> <article class="bg-slider-2"> </article> </div> </div>

<script src="js/vendor/jquery.js"></script> <script type="text/javascript" src="js/jquery.wmuSlider.min.js"></script> <script> var options = {navigationControl: false, animation: fade}; $(".wmuSlider").wmuSlider(options); </script>

And my CSS is identical to the video's code:

.bg-slider-1 { width: 100%; height: 100%; background: hsla(171, 96%, 3%, 1) url('../img/Background1.jpg') no-repeat center center fixed; background-size: cover; position: fixed; top: 0px; left: 0px; }

.bg-slider-1 { width: 100%; height: 100%; background: hsla(171, 96%, 3%, 1) url('../img/Background2.jpg') no-repeat center center fixed; background-size: cover; position: fixed; top: 0px; left: 0px; }

.wmuSlider { position: relative; overflow: hidden; height:310px; } .wmuSlider .wmuSliderWrapper { display: none; } .wmuSlider .wmuSliderWrapper article { position: relative; height:310px; }

.wmuSliderPagination {
    z-index: 2;
    position: absolute;
    left: 48%;
    bottom: 10px;
}

1 Answer

Ajinkya Borade
PLUS
Ajinkya Borade
Courses Plus Student 16,635 Points
Ajinkya Borade
Ajinkya Borade
Courses Plus Student 16,635 Points

Hi, if you can use other plugins then..

  1. http://www.slidesjs.com/
  2. http://www.woothemes.com/flexslider/

Flexslider is my favorite since inside each LI you can add DIV, and easy to customize with css.

OR, if you are just doing this for study purpose then you can play arround with WMUslider and I wll also learn from ur progress

Chad Ralston
Chad Ralston
1,123 Points

Thanks for the tip - the flexslider from woothemes is awesome! I got it working really quickly, much easier than WMUslider.

Maybe I will come back and play around with WMU later and keep you posted for sure.

For now, I'm just happy to have implemented a working slider!