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 Using jQuery Plugins Using a jQuery Carousel The Carousel Challenge Solution

MANUEL CERNA
PLUS
MANUEL CERNA
Courses Plus Student 4,739 Points
Posted by MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points

I am trying to style the dots, but I see numbered blocks instead. I have saved a print screen of what I see on the page

I can't seem to paste the screen shot. So here is my description:

I see these buttons on my page, but can't seem to locate them on index.html and remove them from web page.

<button type="button" data-role="none" class="slick-prev" style="display: inline-block;">Previous</button> <button type="button" data-role="none" class="slick-next" style="display: inline-block;">Next</button>

In addition, I have added the .slick-dots li styling on main.css, but dots do not display.
What displays are numbers 1, 2, 3 formatted as Previous and Next buttons (block with numbers inside). Is something overriding my styling and I can't see it.

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

If you can't locate the buttons in the index.html, where did you get the code pasted in above:question:

We will need to see more of the code to help with the style problem. Make a snapshot of your workspace and post the link to it here.

MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points
MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points

/index.html file/ <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Agency - A Treehouse template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--CSS--> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="js/slick/slick.css"
    <link rel="stylesheet" href="js/slick/slick-theme.css"
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="row">
    <header class="row header">
      <div class="grid-third">
        <a href="index.html" class="logo "></a>
      </div>
      <div class="grid-third tagline">
        <h1 class="description">We build apps</h1>
      </div>
      <div class="grid-third">
        <nav>
          <a href="index.html">Home</a>
          <a href="work.html">Work</a>
          <a href="#" class="active">Team</a>
        </nav>
      </div>
    </header><!--/header-->
    <div class="main row">
    <div class="grid-full">
      <div class="team">
        <h2>Meet the team</h2>
        <h4>United we stand divided we fail</h4>
      </div>

      <!-- slides -->
      <div class="slides">
        <div>
          <img src="img/team-members/team--01.png" alt="" class="avatar" />
          <h3>Bill Bigsby IV</h3>
          <p>CEO</p>
        </div><!--/1-->
        <div>
          <img src="img/team-members/team--02.png" alt="" class="avatar"  />
          <h3>Jane Jewels</h3>
          <p>CFO</p>
        </div><!--/2-->
        <div>
          <img src="img/team-members/team--03.png" alt="" class="avatar"  />
          <h3>Doughy Digital</h3>
          <p>Lead Developer</p>
        </div><!--/3-->
        <div>
          <img src="img/team-members/team--04.png" alt="" class="avatar"  />
          <h3>Ralph Raider</h3>
          <p>Lead Designer</p>
        </div><!--/4-->
        <div>
          <img src="img/team-members/team--05.png" alt="" class="avatar"  />
          <h3>Nolan Nitro</h3>
          <p>Senior Developer</p>
        </div><!--/5-->
        <div>
          <img src="img/team-members/team--06.png" alt="" class="avatar"  />
          <h3>Donna Danger</h3>
          <p>Senior Developer</p>
        </div><!--/6-->
        <div>
          <img src="img/team-members/team--07.png" alt="" class="avatar"  />
          <h3>Rebecca Roo</h3>
          <p>Senior Designer</p>
        </div><!--/7-->
        <div>
          <img src="img/team-members/team--08.png" alt="" class="avatar"  />
          <h3>Lenny Lowes</h3>
          <p>Senior Designer</p>
        </div><!--/8-->
        <div>
          <img src="img/team-members/team--09.png" alt="" class="avatar"  />
          <h3>Eli Elfs</h3>
          <p>Designer</p>
        </div><!--/9-->
        <div>
          <img src="img/team-members/team--10.png" alt="" class="avatar"  />
          <h3>Trevor Tuesday</h3>
          <p>Junior Developer</p>
        </div><!--/10-->
        <div>
          <img src="img/team-members/team--11.png" alt="" class="avatar"  />
          <h3>Tori Traffic</h3>
          <p>Project Mangagement</p>
        </div><!--/11-->
        <div>
          <img src="img/team-members/team--12.png" alt="" class="avatar"  />
          <h3>Fido Fur</h3>
          <p>Office Manager</p>
        </div><!--/12-->
      </div>

    </div>
    </div><!--/main-->
    <footer>
      <div class="row">
        <div class="grid-full">
          <p>Connect with us</p>
          <ul class="social">
            <li>
              <a href="#" class="pink"></a>
              <a href="#" class="light-blue"></a>
              <a href="#" class="dark-blue"></a>
            </li>
          </ul>
        </div>
      </div>
    </footer><!--/footer-->
    </div>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/slick/slick.min.js"></script>
    <script>
      $('.slides').slick({
        dots: true,
        slidesToShow: 4,
        slidesToScroll:4
      });
    </script>
</body>

</html>

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

Your code uses several resources that are not included here, and your issue cannot be replicated with only the HTML.

To share everything at once, make a snapshot of your workspace and post the link to it here. If you're not already using workspaces, porting your project into one might be a good idea unless you have a live URL where it is hosted you can share.

MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points
MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points

Steven, Thanks for your help. I will send the files tomorrow. Have a great evening.

mc

MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points
MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points

Steven,

I resolved the issue. I had the normalize stylesheets in the incorrect order within the index.html file.
Thanks for your assistance.

mc

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

Ack, I should have spotted that!   :stuck_out_tongue_winking_eye:

1 Answer

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

Congratulations on resolving your issue! :+1:

I'm adding this as an answer so it will stop showing up in the "unanswered" category. You could also change the title to include [SOLVED] as an alternative to chosing a best answer as a way to indicate the issue is closed.

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

Awww shucks.   :blush:   I didn't deserve it this time, but thanks!