Support » Plugin: Captain Slider » First Slide on top of everything

  • Resolved Bolteh



    I set up captain slider (great work, btw) and everything appears to be working, other than one issue that I can’t seem to fix.

    I have 4 slides in my slider, when the page loads it shows the first one correctly. But every 6 seconds, when the next slide fades in, it fades in behind the first slide. So the first slide is always on top for the first 4 fades.

    After the first 4 fades, the slider starts fading in properly, so from the first to the second and so on.

    Any ideas?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Captain Theme


    Could I please have the link to your site where this is happening?

    It may be caused by another theme/plugin, so deactivate all plugins besides ‘Captain Slider’ and set your theme to be the default Twenty Ten/Eleven/Twelve theme. If it’s working after that, you can troubleshoot each plugin by activating them one by one to see which one is causing it.


    I just deactivated all the plugins and set the theme to default, but that didn’t fix it.

    The test-server with the slider on it:

    This only has 2 slides instead of 4, but it has the same problem: second slide fades in behind the first one at the start.

    Plugin Author Captain Theme


    I’m really not sure regarding IE7 as the plugin just doesn’t support it. I would have a look and try find a fix for you, but I’m currently overseas and only have a Mac with me. I’ll try and do some testing in a week and see if I can come up with a fix. For now, I’ve opened up an issue on Github – so that it’s not forgotten about and so anyone else can create a fix for it.

    I had a look and I think it may have to do with the banner plugin you have. Try using it outside of that and see if it works?

    By the way, I love what you did with the new arrow buttons! It looks great.

    For IE7: I went into flexslider.css itself (instead of the styles.css of wordpress) and added a fixed height of 360px and the overflow there to .flexslider, that appears to have done the trick for my specific case (my banners will always be 360px high anyway).

    The “BannerPlugin” class there is just a DIV I created, not part of a plugin. Originally I only had wp-cycle for the image rotation, but that thing kept breaking when stuff got updated, so I gave up on it (and as such has been removed).

    I also put the slider on a page using [slider id=…] but that still has the problem.

    I’ll keep that [slider] there (homepage, below the title), maybe it’ll give you a better idea of what’s going on).

    Plugin Author Captain Theme


    Thanks for the IE7 tip, that’ll help a lot when I do a fix for it.

    Yeah, I’ll have a proper look later. I have a new version coming out next week that may fix it, where I’m incorporating the ImagesLoaded plugin, so the slider only starts once all images have been loaded. That should probably fix it. Will let you know when the update is out. 🙂

    I added the following 2 classes at the bottom of flexslider.css:

    .slides {
    	z-index: 1 !important;
    .flex-active-slide {
    	z-index:2 !important;

    This fixes the fact that slide 2 gets loaded behind slide 1 the first time around. However, the fade animation is gone for the first round of slides. The second time around the fade works properly

    Check URL I posted before.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘First Slide on top of everything’ is closed to new replies.