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.

HTML Build an Interactive Website jQuery Plugins Responsive Slider Plugin - CSS

Kiyomi Li
Kiyomi Li
22,436 Points

wmuSlider not appearing on page

Hi,

I was following along with the video but after you added the wmuSlider plugin, the slider portion of the page did not appear. I just get a blank area with two little circles. I even used the project files associated with the video and I still get the same result. Please help. Thank you.

Héctor Carneiro
Héctor Carneiro
10,746 Points

have you write this code at the bottom?

  setTimeout (function(){
    $(".fittext").fitText(2.2);

  }),1;

2 Answers

Brian Hernandez
Brian Hernandez
20,285 Points

Hey Kiyomili,

I was getting the same problems as you with just the pagination in mint green showing up on the lower left and nothing else showing. The problem for me seemed to happen after adding some of the CSS styling from the demo.css that came with the plugin download into the head of the index.html page.

After looking through some of the CSS styling that we are told to put in the head of index.html I noticed this:

    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    <style>
        .wmuSlider {
            position: relative;
            overflow: hidden;
            height: 310px;
        }
        .wmuSlider .wmuSliderWrapper {
            display: none;
        }
        .wmuSlider .wmuSliderWrapper article {
            position: relative;
            height: 310px;
        }

Can you tell? .wmuSlider and .wmuSliderWrapper is set to display:none After commenting out this line, I was able to see the plugin again in both my Safari and Firefox browsers. Maybe it was forgotten to be mentioned in the video.

        .wmuSlider .wmuSliderWrapper {
            /*display: none;*/
        }

Hopefully that helps your situation. Since the pagination was showing up, I began to troubleshoot with turing off some of the different CSS declarations and quickly stumbled upon the display: none and figured that had to be the reason why it wasn't showing.

Kiyomi Li
Kiyomi Li
22,436 Points

Thanks! I noticed that right after I posted my question.