slider disappears after 1 second in view

Enthusiast ,
Jan 04, 2019 Jan 04, 2019

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?

Tryit Editor v3.6

Full page How To from W3:

How To Create a Slideshow

Views

1.0K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Enthusiast , Jan 04, 2019 Jan 04, 2019
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!

Likes

Translate

Translate
LEGEND ,
Jan 04, 2019 Jan 04, 2019

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 04, 2019 Jan 04, 2019

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 04, 2019 Jan 04, 2019

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 04, 2019 Jan 04, 2019

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 04, 2019 Jan 04, 2019

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 04, 2019 Jan 04, 2019

Copy link to clipboard

Copied

Great idea! Not sure how I overlooked that as option to check things out. I will try.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 04, 2019 Jan 04, 2019

Copy link to clipboard

Copied

LATEST

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines