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 What is a Carousel?

charlotte22
charlotte22
1,209 Points
Posted by charlotte22
charlotte22
1,209 Points

Cannot get Slick Slider (carousel) to appear on webpage.

Hi,

I have reviewed the Using jQuery Plugins course over and over and I cannot get Slick Slider to work on my webpage. When I say 'work', I really mean appear. I feel I have added everything in the correct order, as described in the tutorial and on Slick's website but my images (that make up my slider) just sit there uninterrupted like there is no jQuery present. I have tried this out with a .carousel with empty div tags in too, in case that images were covering the workings of the slider. Below is my relevant html, I have checked my pathways are correct.

<link rel="stylesheet" type="text/css" href="css/_normalize.css"/> <link rel="stylesheet" type="text/css" href="js/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="css/_index.css"/> <meta name="viewport" content="width=device-width"> <title> Knock Letting Agency - Property Management in Nottinghamshire and Leicestershire </title>

</head>

<body>

<div class ="wrapper">

<header> <div class="logolion"> <a href="index.html"><img src="_images/lion.png" alt="Lion logo"></a> </div> <div class="logotext"> <a href="index.html"><img src="_images/logo.png" alt="Knock Letting Agency"></a> </div>

<div class="info"> <a href="mailto:info@knocklettings.co.uk"><img src="_images/info.png" alt="Opening Times and Contact Details" title="Contact us"></a> </div>

<nav> <ul> <li><a href="index.html"><img src="_images/home.png" alt ="Home" title ="Home"></a></li> <li><a href="landlords.html"><img src="_images/landlords.png" alt ="Landlords" title ="Landlords"></a></li> <li><a href="tenants.html"><img src="_images/tenants.png" alt ="Tenants" title ="Tenants"></a></li> <li><a href="list.html"><img src="_images/list.png" alt ="Properties Available" title ="Properties Available"></a></li> </ul> </nav>

</header>

<section> <h1>Residential lettings and property management across the East Midlands</h1> <div class ="carousel"><a href="list.html"> <div><img src="_images/lounge.jpg" alt="Living Room" class="active"></div> <div><img src="_images/kitchen.jpg" alt="Kitchen"></div> <div><img src="_images/bedroom.jpg" alt="Bedroom"></div> <div><img src="_images/dining.jpg" alt="Dining Room"></div>
</a> </div> </section>

<footer> <p>© Knock Lettings 2015</p> </footer>

<script src="js/jquery-1.11.2.min.js"></script> <script src="js/slick/slick.min.js"></script> <script> $(document).ready(function(){ $('.carousel').slick({ setting-name: setting-value }); });

</script>

</div>

charlotte22
charlotte22
1,209 Points
charlotte22
charlotte22
1,209 Points 
<link rel="stylesheet" type="text/css" href="css/_normalize.css"/>
<link rel="stylesheet" type="text/css" href="js/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/_index.css"/>
<meta name="viewport" content="width=device-width">
<title> Knock Letting Agency - Property Management in Nottinghamshire and Leicestershire </title>

</head>

<body>

<div class ="wrapper">

<header>
<div class="logolion">
<a href="index.html"><img src="_images/lion.png" alt="Lion logo"></a>
</div>
<div class="logotext">
<a href="index.html"><img src="_images/logo.png" alt="Knock Letting Agency"></a>
</div>

<div class="info">
<a href="mailto:info@knocklettings.co.uk"><img src="_images/info.png" alt="Opening Times and Contact Details" title="Contact us"></a>
</div>


<nav>
<ul>
<li><a href="index.html"><img src="_images/home.png" alt ="Home" title ="Home"></a></li>
<li><a href="landlords.html"><img src="_images/landlords.png" alt ="Landlords" title ="Landlords"></a></li>
<li><a href="tenants.html"><img src="_images/tenants.png" alt ="Tenants" title ="Tenants"></a></li>
<li><a href="list.html"><img src="_images/list.png" alt ="Properties Available" title ="Properties Available"></a></li>
</ul>
</nav>

</header>

<section>
<h1>Residential lettings and property management across the East Midlands</h1>
<div class ="carousel"><a href="list.html">
 <div><img src="_images/lounge.jpg" alt="Living Room" class="active"></div>
    <div><img src="_images/kitchen.jpg" alt="Kitchen"></div>
    <div><img src="_images/bedroom.jpg" alt="Bedroom"></div>
    <div><img src="_images/dining.jpg" alt="Dining Room"></div>   
</a>
</div>
</section>




<footer>
<p>&copy; Knock Lettings 2015</p>
</footer>

<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/slick/slick.min.js"></script>
<script>
 $(document).ready(function(){
  $('.carousel').slick({
    setting-name: setting-value
  });
});

</script>

</div>```
(Sorry, posted code incorrectly in original question).

1 Answer

myackley35
myackley35
34,574 Points

Hi charlotte!

You have everything set up correctly with your linked stylesheet and script for Slick. Try replacing the "carousel" class with "slick" in your markup and either apply the anchor link to each image tag within or remove it. After that apply a unique class or id to your Slick slideshow in the markup and then pop that into your script where you are initializing the slideshow. Example:

Adding the anchor tag to each image...

<div class="slick" id="slideshow">
  <div><a href="list.html"><img src="_images/lounge.jpg" alt="Living Room"></a></div>
  <div><a href="#"><img src="_images/kitchen.jpg" alt="Kitchen"></a></div>
  <div><a href="#"><img src="_images/bedroom.jpg" alt="Bedroom"></a></div>
  <div><a href="#"><img src="_images/dining.jpg" alt="Dining Room"></a></div>  
</div>

...

<script>
 $(document).ready(function(){
  $('#slideshow').slick({
    setting-name: setting-value
  });
});
</script>

At this point you should be able to set up some properties in your script.

I hope this helps!