How to get bxSlider to hide the slides until the page loads?

Question

I'm building an website that uses bxSlider.

As the page loads, all of the slides are visible, stacked on top of each other. Once the page is fully loaded, the first slide remains visible and the rest disappear so that the slider can animate and display them one at a time.

I've tried using various CSS and bxSlider callbacks to hide the slides until the page fully loads, but no luck. Does anyone know how to do this?

Thanks!

Put `display:hidden` on the element that contains the slider and at document.ready show it. — Deep Frozen, Jul 25 '12 at 21:11
Use overflow:hidden and height:'height of slider' on the element that contains the slider . — Mandeep Pasbola, Nov 17 '12 at 09:23

score 54 · Answer 1 · edited Oct 05 '16 at 06:21

54

bxslider has a callback when the slider is loaded (onSliderLoad).I set visibility to hidden on a container div and then use the callback to set the visibility to "visible."

<div id="siteslides" style="visibility: hidden;"></div>

$(".site_banner_slider").bxSlider({
    auto: true,
    slideWidth: $imageWidth,
    mode: 'fade',
    onSliderLoad: function(){
        $("#siteslides").css("visibility", "visible");
      }
  });

edited Oct 05 '16 at 06:21

crmpicco

14,513
22
113
191

answered Oct 21 '13 at 18:18

bradrice

1,333
17
37

This worked for me. I made a small change where I don't hide the first email to avoid jumpiness. – Daniela Jan 24 '16 at 14:07

Ehsan Khaveh · Answer 2 · 2013-04-29T15:58:34.447

32

I had the same problem and got around it this way:

<div class="mySlider" style="display:none">

then

$(document).ready(function(){
      $('.mySlider').show().bxSlider({
        slideWidth: 160,
        minSlides: 2,
        maxSlides: 5,
        preloadImages: 'all'
      });
    });

edited Apr 29 '13 at 15:58

answered Apr 29 '13 at 15:50

Ehsan Khaveh

1,163
12
19

Nice solution ! – Rahul Feb 28 '17 at 04:46

score 13 · Answer 3 · edited Aug 10 '12 at 18:58

13

Put a div that's wrapping all the content and put a style="display:none" on it. Then after you call bxslider, just show it.

EX:

<script type="text/javascript">
$(document).ready(function(){

    $('.bxlider').bxSlider({
        displaySlideQty : 5,
        prevText : "",
        nextText : "",
        moveSlideQty : 5,
        infiniteLoop :  false
    });
    $(".bxsliderWrapper").show("fade");
});
</script>

edited Aug 10 '12 at 18:58

Pablo Claus

5,592
3
25
37

answered Aug 10 '12 at 18:32

Bob

141
2

Don't know why this got a down vote, it works well for me. Only difference is I put the show statement before the slider, but still in document ready. Good Answer. – Ross Coulbeck Oct 12 '12 at 13:11
2

in the latest versions of bx-slider this really needs to be done in callbacks to ensure you're calling it at correct time: e.g. $('.bxslider').bxSlider({ onSliderLoad: function() { #show wrapper } ); you may need to also have to have to rethink showing the wrapper class when you have more than one slider on the page. – Code Novitiate Oct 17 '13 at 22:08

score 9 · Answer 4 · edited Jul 20 '14 at 00:37

9

None of the posted solutions worked for me.

Using visibility:hidden just resulted in a huge blank space on the page.

For some reason using display:none resulted in none of the slides loading, just the controls.

This is the only way I could get some sort of reasonable solution:

In the CSS:

.ctaFtSlider
{
visibility: hidden;
height: 0;
}

In the function:

$(document).ready(function(){
$('.bxslider').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});

Finally, the HTML:

<div class="ctaFtSlider">
...
</div>

edited Jul 20 '14 at 00:37

CRABOLO

8,322
38
38
66

answered Jul 20 '14 at 00:15

Brogan

91
1
1

2

This is the only thing that work for me as well. using visibility:hidden and display:none didn't load the images – David Mar 10 '15 at 00:33
1

Same thing, this worked for me when all other answers failed. – user2780436 Mar 21 '15 at 05:39
would be nice if it animates from alpha 0 to 100 – Marc Aug 01 '16 at 14:05

score 8 · Answer 5 · answered Oct 10 '13 at 19:01

8

What I ended up doing was added some CSS to hide all but the first slide.

No additional markup or behavior required and works across all major browsers!

.bxslider {
  li {
    display: none;

    &:first-child {
      display: block;
    }
  }
}

answered Oct 10 '13 at 19:01

Jeff Miller

2,307
1
22
39

1

I discovered this for myself today as well and it works fine. In fact I didn't even need the displaying of the first-child. I have just hidden all the li elements within the slider and bxslider has automatically overwridden the values once it has rendered but it stopped the horrible shifting of list items for a split second that what driving me mad. – AdamJones Dec 24 '15 at 14:41
1

This should really be the selected answer. It doesn't require a modification to your bxSlider call in the JavaScript or anything. Well done! In cases where I'm not using the `.bxslider` element as an unordered list, I would target the top-level carousel elements like this: `.bxslider > * { display: none; }` – htmlbot Apr 07 '16 at 16:50

Eleonora Velikova · Answer 6 · 2015-06-24T11:25:59.843

4

Suppose you have:

HTML:

<ul class="slider">
<li>...</li>
<li>...</li>
</ul>

and jQuery:

jQuery('.slider').bxSlider({
        ...
});

Then the following solution would do the trick by hiding all slides but the first one.

CSS:

ul.slider li:nth-child(n+2) {
    display: none;
}

When the slider is fully loaded each active slide will automatically get style display: block.

edited Jun 24 '15 at 11:25

answered Jun 22 '15 at 13:06

Eleonora Velikova

145
1
8

1

Please explain your answer. – Dropout Jun 22 '15 at 13:41
I like this, but it doesn't work for "horizontal" mode (swiping)... only for "fade" – Martin Zvarík Dec 22 '17 at 11:52
@Dropout what's to explain? Ze hides everything but the first child (slide) with CSS, and then once the slider is generated, it forces everything to be block. It works perfectly. – Kenton de Jong Jun 28 '18 at 02:02
@KentondeJong before the answer was edited it was "code only". These types of answers are often marked as low quality and removed, which is how I got to the answer. It's OK now. – Dropout Jun 29 '18 at 08:09

score 3 · Answer 7 · answered Jul 29 '12 at 22:36

3

I had the same issue and this trick helped me out:

     <ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">

put height and overflow values on the ul element of the slider.

Best Regards

answered Jul 29 '12 at 22:36

Kire Bananaman

97
3

Jonathan Potter · Answer 8 · 2015-10-23T19:54:02.960

3

A quick and easy CSS-only solution for modern browsers (IE10+) is:

.bxslider {
    transform: scale(0);
}

This works because initially the slider will be scaled down to nothing but then when bxSlider loads it will override the transform with an inline style.

edited Oct 23 '15 at 19:54

answered Oct 23 '15 at 17:41

Jonathan Potter

2,539
1
21
18

score 2 · Answer 9 · edited May 23 '17 at 11:33

Had this same issue. I used the markup below and initially hid the containing <div class="bxsliderWrapper"> with CSS display: none; I noticed the width of the slides <div class="slide"> were rendered at 1px.

I suspect it has something to do with the responsive featured taking the dimensions of the initial container, which was hidden, and defining inline styles for each slide to match.

<div class="bxsliderWrapper">
  <div class="bxslider">
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
  </div>
</div>

My solution is similar to what bradrice mentioned above about using the built in call-back functions. I just added the reloadSlider() function to the show() function instead.

<script type="text/javascript">

var $j = jQuery.noConflict();
$j(document).ready(function(){
  var homeSlider = $j('.bxslider').bxSlider();
  $j(".bxsliderWrapper").show(0, "swing", function(){homeSlider.reloadSlider();});
});

</script>

It triggers the reload once show() is complete.

.

EDITED

The original solution above worked initially but I had issues when the cache was cleared during a hard refresh shift + REFRESH. I'm assuming the elements targeted by the .show() function were not available in time or the resources were not loaded yet. (I'm guessing) Below is a fix for this behavior.

Instead of hiding the Bx Slider containing <div> with display: none;, I hid the slide images using the visibility CSS attribute.

.bxslider .slide {
  visibility: hidden;
}

This allows the slider to render at the correct size without seeing the images on screen until they are ready. Then I used the jQuery .css() method triggered by $j(window).load() to change the visibility after the page has loaded. This ensured that all the code and elements existed before displaying them.

<script type="text/javascript">

  var $j = jQuery.noConflict();

  $j(document).ready(function(){
    var homeSlider = $j('.bxslider').bxSlider();
  });

  $j(window).load(function(){
    $j(".bxslider .slide").css("visibility", "visible");
  });

</script>

This method also worked with multiple sliders on the same page. I found the .show() method caused all instances of the slider to break. I'm only guessing at why this is a better solution but maybe someone can add some info to understand this better.

score 2 · Answer 10 · answered Feb 05 '15 at 18:17

I can't remember where I found this but I think it is the cleanest way to accomplish this issue of all the slides being visible on page load.

First add a div around the bxslider unordered list:

<div class="bxslider-wrap">
    <ul class="bxslider">
        <li>Image / Content </li>
        <li>Image / Content </li>
        <li>Image / Content </li>
    </ul>
</div>

Next, add this line to your css file which hides the entire slider when the page loads:

.bxslider-wrap { visibility: hidden; }

Lastly, set the slider to visibility: visible via jQuery (in your js file) when the slider loads to make the slider visible again!

jQuery(document).ready(function($) {
    $('.bxslider').bxSlider({
        onSliderLoad: function(){ 
            $(".bxslider-wrap").css("visibility", "visible");
        }
    }); 
});

Hope this helps!

score 2 · Answer 11 · answered Sep 05 '15 at 15:18

I tried most of the solutions to this and found that they weren't polished enough for what I was going for. I was still getting a jerky presentation once the slider had loaded with it just appearing. Using .fade() was close, but it animates from top left to bottom right which looked odd. Hooking into onSliderLoad works great, but changing visibility still makes the slider just appear on the screen. I was looking for a bit more of an elegant entrance so on the hook, I added a class instead of changing the CSS.

jQuery:

$('.slider').bxSlider({
    auto: false,
    pager: false,
    mode: 'fade',
    onSliderLoad: function(){
        $(".slide-clip").addClass('-visible');
    }
});

SASS:

.slide-clip {
    opacity:0;
    max-width: 1305px;  // Used as a clipping mask
    max-height: 360px; // Used as a clipping mask
    overflow:hidden;  // Used as a clipping mask
    margin:0 auto;
    transition(all 275ms);
    &.-visible {
        transition(all 275ms);
        opacity:1;
    }

}

I'm using a wrapper to mask my slider as I have a need for it in my case, so for those interested:

<div class="slide-clip">
    <ul class="slider">
        <li style="background-image: url('URL_HERE');"></li>
    </ul>
</div>

score 1 · Answer 12 · answered Mar 07 '15 at 13:38

I had added a title and text div to my slider so when they were loading it all got stacked at the top of the page, so with the help of this post I managed to hide the slide elements but show a loading element:

As others above have said a visibility:hidden class was added to the outer div, but I also added a visibility:visible class outside of that to show an ajax_loader, then with the code below, set the first to hide when the slides loaded and were set to visible. Now instead of having an ugly blank space whilst the slides loaded, you get to see a loader, so it makes more sense to the user:

jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
    onSliderLoad: function(){ 
        $(".slideouter").css("visibility", "visible");
        $(".slideloader").css("visibility", "hidden");
    },
   autoControls: true,
  auto: true,
  mode: 'fade'
});

I hope this helps, so slideouter is the div that is hidden in your css and slideloader is visible in your css, but both get swapped once the slider has loaded. Hope it helps.

Cheers, Lee

score 0 · Answer 13 · answered Jun 27 '13 at 07:19

I don't know about exactly style="display:none" method, but when "hide()/fadeOut()" with jQuery bxSlider's container and after that init bxSlider, it'll be rendered with errors in markup. (possibly using display:none would avoid the error, but if you want to fade yours slider, my method would be appliable)

just position your container as 'absolute' in css and in your JS before initialization of bxSlider move it to invisible part of the page, init it, and then hide it, return it to the former point and finally fadeIn:

$("#bxslider-container").css({'left' : "4000px"});
$('.bxslider').bxSlider();
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000);

hope it'll help

score 0 · Answer 14 · answered Aug 19 '15 at 07:04

I've used this css and it worked for screens above 1200 width because my slider is that width on max size, the tablet version Isn't fixed yet, you could also try an amount of % instead of pixels this way.

.banner is my main div for my bxslider slider.

.banner{overflow: hidden !important; height: 426px;}
@media screen and (max-width: 1200px){.banner{height: auto;}}

<div class="banner">
  <div class="bx-wrapper">
          
  </div>           
</div>

Dave Stringer · Answer 15 · 2012-08-24T14:37:48.143

Not an answer per se, but has anyone noticed that with this bug, all the opactity(ies) of the list items are set to 1? I believe the initial setChildrenFade is not being called on the initalisation of the slide show.

Updated:

I've managed to sort it by adding:

/**
    * Start the slideshow
    */
    this.startShow = function (changeText) {
      if (options.mode == 'fade') {
                    setChildrenFade();
                }

To the start show function.

It appears that setChildrenFade does not get called by design until GoToSlide is called. It maybe that this is a bug, as you only really notice the problem if the background of the list item is set to transparent...otherwise the z:index handles the hiding on the initial start.

Hope this helps.

How to get bxSlider to hide the slides until the page loads?

15 Answers15

Linked