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 Changing the Appearance of the Carousel

Ray Mak
Ray Mak
4,667 Points
Posted by Ray Mak
Ray Mak
4,667 Points

My slick slider dots doesn't look normal.

I am having issues getting dots to to show it in normal fonts.

The dots look funny and they are not in round shape at all. I thought it was probably css files not loaded correctly, but I looked at my head tag and it includes all the css files. There are no custom stylesheets that may cause the problem. All I have is below code.

<!DOCTYPE html>
<html>
<head>
    <title>Slider V1</title>

    <link rel="stylesheet" type="text/css" href="/sliderv1/slick.css">
    <link rel="stylesheet" type="text/css" href="/sliderv1/slick-theme.css">
    <script type="text/javascript" src="/sliderv1/js/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/sliderv1/js/jquery-ui.js"></script>    
    <script type="text/javascript" src="/sliderv1/slick.min.js"></script>

</head>
<body>
<div id="wrapper">
    <div class="slick-slider-inodd">
        <div>
            Slider 1
        </div>
        <div>
            Slider 2
        </div>
        <div>
            Slider 3
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.slick-slider-inodd').slick({
        arrows: true,
        dots: true
    });
</script>
</body>
</html>
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Ray Mak, just letting you know I've modified your original question to use the correct syntax highlighting, so now you can see the script tags.

As for your issue with the dots... can you share a screenshot and maybe a snapshot of your workspace?

4 Answers

Max Fortin
Max Fortin
4,435 Points
Max Fortin
Max Fortin
4,435 Points

Found the answer to this! Add <meta charset="UTF-8"> as one of your <head> tags. This will fix the issue!

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Ray, I think the issue is you have not surrounded your jquery script with script tags, try:

<script>

$('.slick-slider-inodd').slick({
    arrows: true,
    dots: true
});

</script>
Ray Mak
Ray Mak
4,667 Points
Ray Mak
Ray Mak
4,667 Points

Thanks Kelly for your response. in my html page, I do have script tag in it. I am not sure why it gets removed when I post it. I tried to report again, but it is removing script tag.

Nick Field
Nick Field
17,091 Points
Nick Field
Nick Field
17,091 Points

Hi Ray,

Late response, but try placing all script tags (for jQuery, Slick, Animsition etc) at the bottom of the html file before the closing body tag and before the script that initialises Slick. This is often best practice, as usually plugins/JS need to scan a html file for classes/IDs etc on page load to function properly.

Hope that helps!

Adjetey Octavius
Adjetey Octavius
1,699 Points
Adjetey Octavius
Adjetey Octavius
1,699 Points

Most people do see 'content: '•' ' showing up when they refresh their browser.Well adding <meta charset="UTF-8"> in the head tag of your pages will fix this issue.