apologies if this seems like a noob question but I've been struggling to get my slider work on the server just like it does locally. Its tough to find the exact problem as there are no error logs on the console.
Here's my HTML head tag & scripts:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title><%= pageTitle %></title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/lightslider.css">
<!-- JQuery library -->
<script type="text/javascript" src="/js/jquery.js"></script>
<!-- Lightslider javascript -->
<script type="text/javascript" src="/js/lightslider.js"></script>
<!-- Font awesome -->
<script src="https://kit.fontawesome.com/67c66657c7.js"></script>
<!-- TinyMce Editor Script -->
<script
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"
referrerpolicy="origin"
></script>
<script>
tinymce.init({
selector: "#description",
});
</script>
</head>
And here is my inline script on the page I'm using it on:
<script type="text/javascript">
$(document).ready( function() {
$('#responsive').lightSlider({
item: 6,
loop: false,
controls: true,
keyPress: true,
mode: 'slide',
slideMove: 2,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed: 600,
responsive: [
{
breakpoint: 769,
settings: {
item: 3,
slideMove: 1,
slideMargin: 6,
}
},
{
breakpoint: 480,
settings: {
item: 3,
slideMove: 1
}
}
]
});
});
</script>
This codes runs fine on localhost with no errors but when I push this same code to the server, it doesn't work. The inline script doesn't work on the elements even though the code is visible when I inspect the page and every src/link is loaded in the page. I'd really appreciate a solution to this from you guys!