tiny-slider
tiny-slider copied to clipboard
Container not found + Cannot read property 'Lenght' of undefined
Issue description:
I try to set up a simple slider, but get the error in the description. I try to get it work in Wordpress.
My functions.php is seting up the tiny-slider js and css and a tiny-slider-custom.js with the following settings for the slider:.
Demo link/slider setting:
var slider = tns({ container: 'my-slider', items: 12, slideBy: 'page', autoplay: true });
class "my-slider" is properly assigned to a wrapper-div. So no idea, why I get the error.
here is the console output:
Can't find 'my-slider' (anonymous) @ tiny-slider.js:619 $i @ tiny-slider.js:610 (anonymous) @ tiny-slider-custom.js?ver=5.5.1:3 tiny-slider.js:626 Uncaught TypeError: Cannot read property 'length' of undefined at $i (tiny-slider.js:626) at tiny-slider-custom.js?ver=5.5.1:3 $i @ tiny-slider.js:626 (anonymous) @ tiny-slider-custom.js?ver=5.5.1:3
Tiny-slider version: 2.9.3
You need to specify whether or not the container
property refers to a class
or an id
of the slider DOM element.
If it's a class then use a period before the name:
<div class="my-slider">
YOUR CONTENT
</div>
var slider = tns({
container: '.my-slider',
})
If it's an id then use a hash:
<div id="my-slider">
YOUR CONTENT
</div>
var slider = tns({
container: '#my-slider',
})
I implemented the .my-slider
as a class.
My reference shoul work as I tested my code in codepen and everything fine.
Just in the wordpress page it doesn't work. When I inspect the site I can also see that thetns-*
-classes are not applied to the container and the items inside.
here is some more information:
tiny-slider-custom.js:
Error message console:
this line of the error message: (anonymous) | @ | tiny-slider-custom.js?ver=5.5.1:2
is referencing to line 2 of the tiny-slider-custom.js,
which is not the container
(as this is line 3 in my code), but the following line:
var slider = tns({
code on my index.php:
wordpress: functions.php:
need right order. in the first time html, then tiny-slider.js
included and after var slider=tns{
`
Try this,
if ( $('.my-slider').length > 0 ) {
var slider = tns({
container: '.my-slider',
});
}
You should make sure the DOM has been loaded:
import { tns } from "tiny-slider/src/tiny-slider"
window.addEventListener('DOMContentLoaded', function () {
var slider = tns({
container: '.my-slider',
items: 1,
axis: "vertical",
autoplay: true
});
});