using bxslider, no slides till browser gets resized?

Question

I have a problem with bxslider. I use javascript to show the slider only when the user clicks on a button. But when the slider is shown no slides are there? When resizing the browser the slides show up. I made a fiddle to show the effect

https://jsfiddle.net/Yq3RM/1051/

and here is the code

<a class="show_figures" id="show_figures" href="javascript:showOrHidefigure(0);" style="text-decoration: none;">
    <b>
        Show figures
    </b>
</a> 
<div id="figures" style="display: none">
    <ul class="bxslider">
        <li>
            <img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/houses.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/trees.jpg" />
        </li>
    </ul>
</div>

<script type='text/javascript'>
    function showOrHidefigure(id_dummy) {
        var div = document.getElementById('figures');
        var button = document.getElementById('show_figures');
        if (div.style.display == "block") {
            div.style.display = "none";
            button.innerHTML = "<b>Show figures</b>";
        } else {
            div.style.display = "block";
            button.innerHTML = "<b>Hide figures</b>";
        }
     }
 </script>

how can I make the slide show up without resizing the browser? thanks carl

Answer 1

I've updated your code a little, basically if you remove display: none from your container and hide it with javascript instead it allows bxslider to calculate the size of the images which I believe it only does after loading when the screen is resized.

https://jsfiddle.net/Yq3RM/1058/

HTML:

<a class="show_figures" id="toggle-figures" href="javascript:;">Show figures</a> 

<div id="figures">
    <ul class="bxslider">
        <li>
            <img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/houses.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
        </li>
    </ul>
</div>

JS

var slider = $('.bxslider').bxSlider();
$('#figures').hide();

$('#toggle-figures').on('click', function() {
    $('#figures').toggle();
    if( $('#figures').is(':visible')) {
        $(this).text('Hide figures');
    }
    else {
        $(this).text('Show figures');
    }
});

EDIT

Also just a note, don't use b the appropriate element is strong but in this case you should just apply font-weight: bold with css and also avoid using inline styles.