CODEWITHSUNDEEP
jquerycssbxslider
Nick Petrie
Nick Petrie

Reputation: 5598

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

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!

Upvotes: 40

Views: 68625

Answers (15)

bradrice
bradrice

Reputation: 1755

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");
      }
  });

Upvotes: 55

Jonathan Potter
Jonathan Potter

Reputation: 3081

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.

Upvotes: 3

Jereme Yoho
Jereme Yoho

Reputation: 21

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>

Upvotes: 2

Bas
Bas

Reputation: 1

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>

Upvotes: 0

Eleonora Velikova
Eleonora Velikova

Reputation: 155

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.

Upvotes: 4

Lee Phillips
Lee Phillips

Reputation: 11

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

Upvotes: 1

Jordan Smith
Jordan Smith

Reputation: 91

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!

Upvotes: 2

user2589301
user2589301

Reputation: 21

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.

Upvotes: 2

Brogan
Brogan

Reputation: 91

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>

Upvotes: 9

Jeff Miller
Jeff Miller

Reputation: 2443

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;
    }
  }
}

Upvotes: 8

Roaring Stones
Roaring Stones

Reputation: 1054

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

Upvotes: 0

Ehsan Khaveh
Ehsan Khaveh

Reputation: 1454

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'
      });
    });

Upvotes: 32

Dave Stringer
Dave Stringer

Reputation: 359

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.

Upvotes: -2

Bob
Bob

Reputation: 141

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>

Upvotes: 13

Kire Bananaman
Kire Bananaman

Reputation: 97

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

Upvotes: 3

Related Questions