I'm trying to use this jQuery plugin ( / ) to a carousel. I tried many different plugins, but I always face some kind of error. So, I'm sticking with this until I figure out whats wrong.
Here is my HTML head:
<head>
<!--[if lt IE 9]>
<script src='.js'></script>
<![endif]-->
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<script type="text/javascript" src=".min.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.
<script type=" text/javascript " src="slick/slick.min.js "></script>
<script type="text/javascript " src='/js/carousel.js'></script>
</head>
When I tried it, I got an 'Uncaught TypeError: undefined is not a function' at line to of my JS where I call the function 'slick'. Here it where I call it:
<div class="slider single-items"><div></div><div></div><div></div></div>
And here is my carousel.js:
$(document).ready(function () {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true
});
});
I'm trying to use this jQuery plugin ( http://kenwheeler.github.io/slick/ ) to a carousel. I tried many different plugins, but I always face some kind of error. So, I'm sticking with this until I figure out whats wrong.
Here is my HTML head:
<head>
<!--[if lt IE 9]>
<script src='http://html5shiv.googlecode./svn/trunk/html5.js'></script>
<![endif]-->
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<script type="text/javascript" src="http://code.jquery./jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.
<script type=" text/javascript " src="slick/slick.min.js "></script>
<script type="text/javascript " src='/js/carousel.js'></script>
</head>
When I tried it, I got an 'Uncaught TypeError: undefined is not a function' at line to of my JS where I call the function 'slick'. Here it where I call it:
<div class="slider single-items"><div></div><div></div><div></div></div>
And here is my carousel.js:
$(document).ready(function () {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true
});
});
2 Answers
Reset to default 8I had similar problem, but in my case issue was following:
I had installed slick by bower install slick instead bower install slick.js which caused that I had totally different library included in my dependecies.
You are selecting $('.single-item'), but your markup has elements with class single-items (with a "s" at the end). Assuming this pasted code is correct, your jQuery should be changed to $('.single-items').
$(document).ready(function () {
$('.single-items').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true
});
});
JSFiddle: http://jsfiddle/N6wfG/