0

I'm trying to create a dynamic slider through jQuery like so:
(this isn't the full script, I've just cut relevant pieces

$("head").append( $("<link rel=\"javascript\" type=\"text/css\">").attr("href", sliderjs) );

$('<script>$("#Glide").glide({ type: "carousel"});</' + 'script>').appendTo(document.body);

I can see the slider.js file has loaded correctly, but it's not being recognised by the Glide script, because I'm loading this in separately I thought maybe it wasn't loading in the right order.

I tried adding the append part to:

setTimeout(function() {
$('<script>$("#Glide").glide({ type: "carousel"});</' + 'script>').appendTo(document.body);
}, 300);

to give it time to load in, but it doesn't seem to matter, it still doesn't recognise it.
I've added them to the HTML and that works absolutely fine, but I can't see what I would need to do to get this to work in the right order?

Sjrsmile
  • 253
  • 1
  • 5
  • 20
  • So a couple things. First off. If you never call `$().glide`, it will never activate. So just including the link in your header on page load will save you from having to do that logic. Second, you are trying to use javascript, to insert a script tag on your page, ..... to execute script. Just execute the script. You're already inside script in the page. You don't have to insert it to the page. – Taplar Nov 30 '17 at 18:35
  • This is for a WordPress website, where the user can insert a gallery into a page and when the page loads, it calls the slider jquery only if it's necessary. I'm trying to see if there is a way of loading it dynamically and without an extra button for the user to press for php. – Sjrsmile Dec 01 '17 at 09:43

1 Answers1

0

Okay so after playing a little more after Taplar's comment, I realised I could just call it:

$.getScript(sliderjs, function() {
  $("#Glide").glide({ type: "carousel"});
});

Where sliderjs is a var holding the URL.

Sjrsmile
  • 253
  • 1
  • 5
  • 20