Skip to main content
R
r_tist
Inspiring
January 4, 2019
Answered

slider disappears after 1 second in view

  • January 4, 2019
  • 2 replies
  • 2633 views

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

    This topic has been closed for replies.
    Correct answer r_tist

    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.


    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!

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    January 4, 2019

    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.

    R
    r_tistAuthor
    Inspiring
    January 4, 2019

    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.

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    January 4, 2019

    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.

    hans-g.
    hans-g.
    Legend
    January 4, 2019

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices