4 Replies - 14328 Views - Last Post: 10 September 2014 - 02:33 PM

#1 NerdZilla   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 49
  • Joined: 01-May 14

jQuery plugin slick (carousel) not working

Posted 10 September 2014 - 12:30 PM

Hi,i'm busy with making my own webpage about technology. So now I want to add a carousel plugin from slick (http://kenwheeler.github.io/slick/) but is does not work. Does anybody know why? And yes all the files are included in the root folder where all the files are.

<html>
<head>
<link rel= "stylesheet" type="text/css" href="CSS_Header.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
</head>
<body>

<div class="your-class">
  <div><img src="slide1.png" /></div>
  <div><img src="slide1.png" /></div>
  <div><img src="slide1.png" /></div>
</div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.autoplay').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,  
            });
        });
         $('.your-class').slick();
    </script>

</body>
</html> 


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery plugin slick (carousel) not working

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,345
  • Joined: 12-December 12

Re: jQuery plugin slick (carousel) not working

Posted 10 September 2014 - 12:35 PM

Are there errors in your browser's console? There are links for the various consoles in my signature below: this is an essential tool.

Presumably this is your entire page, in which case you do not have an element with the class-name autoplay. Presumably you mean "your-class" or, more sensibly, you would change this to "autoplay".




You are also missing the DOCTYPE declaration and a title for your page.

This post has been edited by andrewsw: 10 September 2014 - 12:38 PM

Was This Post Helpful? 0
  • +
  • -

#3 NerdZilla   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 49
  • Joined: 01-May 14

Re: jQuery plugin slick (carousel) not working

Posted 10 September 2014 - 01:41 PM

I added the DOCTYPE and still it does not work also the autoplay is in the slick.css ,it just defines what the carousel should look like, i looked in the browser console and i get these errors:

Failed to load resource: net::ERR_FILE_NOT_FOUND file://code.jquery.com/jquery-1.11.0.min.js
Failed to load resource: net::ERR_FILE_NOT_FOUND file://code.jquery.com/jquery-migrat1.2.1.min.js
Uncaught ReferenceError: jQuery is not defined slick.min.js:1
Uncaught ReferenceError: $ is not defined Index.html:66

This post has been edited by andrewsw: 10 September 2014 - 01:48 PM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,345
  • Joined: 12-December 12

Re: jQuery plugin slick (carousel) not working

Posted 10 September 2014 - 01:48 PM

Adding DOCTYPE won't fix the problem(s) you are having, but it is required for every page. So is the title.

Those error messages are telling you it cannot locate the files. You need to include the protocol "http:" otherwise it is looking for these files locally, and failing.
$('.autoplay').slick({

This is attempting to apply slick() to the element(s) with class-name "autoplay". You don't have any elements with this class. This has nothing to do with any formatting you might apply in the css.

Please note that there is no need to quote the previous post, there is a large Reply button further down the page.

This post has been edited by andrewsw: 10 September 2014 - 01:47 PM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,345
  • Joined: 12-December 12

Re: jQuery plugin slick (carousel) not working

Posted 10 September 2014 - 02:33 PM

I see that you have this
$('.your-class').slick();

further down, which will use default values for slick() but I assume that you should be renaming '.autoplay' to '.your-class' and then deleting this redundant line.

But, as it appears you are unfamiliar with how $('.classname') works then I suggest that you should study some basic jQuery before attempting to use a plug-in.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1