CODEWITHSUNDEEP
javascriptjqueryhtmlnpmslick.js
JSharpp
JSharpp

Reputation: 559

Slick Carousel NPM

I am attempting to set up a Slick Carousel on a website. As a test I first tried creating one on a blank page using the code directly from the slick site https://kenwheeler.github.io/slick/. It seems that the javascript is not recognized even when updating the js links to http:. Here is the HTML:

<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
</head>
<body>

<div class="your-class">
    <div><p>test1</p></div>
    <div><p>test2</p></div>
    <div><p>test3</p></div>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.your-class').slick();
    });
</script>

</body>

I figured the issue might be that I did not have the slick carousel package installed. So I installed using NPM and now my package.json looks like this

{
"name": "J",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"jquery": "^3.3.1",
"json-server": "^0.12.1",
"slick-carousel": "^1.8.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}

Am I missing something else that should be added in order for the Slick carousel to initialize and work properly?

Upvotes: 1

Views: 4584

Answers (2)

Leka Solo
Leka Solo

Reputation: 1

It is highly recommended to skip http/https in your urls when including js or css files from cdn. So instead of:

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>

should be:

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

In this case you will never have issues whether your site is using https or not.

Upvotes: 0

2pha
2pha

Reputation: 10165

It seems to be working for me.
I just added dots so it's easier to see.

I also loaded the css and script over https, just so it would work on here.

Click "run code snippet" to see

<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
</head>
<body>

<div class="your-class">
    <div><p>test1</p></div>
    <div><p>test2</p></div>
    <div><p>test3</p></div>
</div>

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.your-class').slick({dots:true});
    });
</script>

</body>

Upvotes: 2

Related Questions