Copy link to clipboard
Copied
I invoked this slider from W3 on my site. Problem is... it appears for 1 second and disappears. When I click the little circle/dot controls or the arrow controls, the image does appear; but again, for only 1 second. I suspect it is something to do with the firing of the javaScript. - This slider is not the auto-change picture variation, but the version where you can purposefully cycle through as a user.
I put the script before close of </body> which is fairly typical. Do you think it needs to come at opening? Might it require a specific library version of jQuery?
Full page How To from W3:
Found it! Was not a script conflict after all. The bootstrap.css file had a couple rules for .fade and .fade.in. Commented those out and voila! It worked!
Copy link to clipboard
Copied
Hello,
please load up your website in question - whatever it looks like 🙂 and send us the link, so we can better analyse.
Hans-Günter
Copy link to clipboard
Copied
That W3Schools slider is just plain javascript and doesn't use any library.
Since the slider functions as expected when copy/pasted into a new document, it's likely other scripts you're using on your page are conflicting with it.
Without seeing your actual page, there's no way of knowing what's going wrong with the script.
Copy link to clipboard
Copied
You are correct. I just took all the code and loaded onto a blank page. It works fine.
So there is a conflict. But how would I even be able to troubleshoot something like that? - Is it typically in the script? Or the CSS?
I have a jQuery script for 'Back to Top' arrow and a 'Smooth Scroll Down Anchor Nav' jQuery easing. The only similarities I can see is the fade feature that applies to both the back to top as well as how each slide is to gracefully fade into view upon cycling through.
Copy link to clipboard
Copied
It's fairly unlikely to be anything but script related, but I suppose, depending on how the page was built, it's possible that there could be a CSS conflict as well.
Copy link to clipboard
Copied
Comment out each of your scripts one by one until you identify which is causing the issue. You then might be able to find a replacement.
Its unusual for a jquery script to interfere with a vanilla javascript solution unless you have some html container with the same class or id which is common to both.
Copy link to clipboard
Copied
Great idea! Not sure how I overlooked that as option to check things out. I will try.
Copy link to clipboard
Copied
Found it! Was not a script conflict after all. The bootstrap.css file had a couple rules for .fade and .fade.in. Commented those out and voila! It worked!