Container not found + Cannot read property 'Lenght' of undefined

[TagIt34]

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

[paulcosmos]

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',
})

[TagIt34]

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:

[romanown]

need right order. in the first time html, then tiny-slider.js included and after var slider=tns{ `

YOUR CONTENT

var slider = tns({ container: '#my-slider', })` for me worked only as i show.

[sinjuangajan]

Try this,

if ( $('.my-slider').length > 0 ) {
    var slider = tns({
    container: '.my-slider',
    });
}

[oberonlai]

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
	});
});