使用bxslider，在调整浏览器大小之前没有幻灯片

using bxslider, no slides till browser gets resized?

本文关键字：幻灯片 bxslider 调整 浏览器 使用      更新时间：2023-09-26

我对bxslider有问题。我使用javascript只在用户单击按钮时显示滑块。但是当显示滑块时，没有幻灯片吗？调整浏览器大小时，会显示幻灯片。我做了一把小提琴来展示的效果

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

这是代码

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

如何在不调整浏览器大小的情况下显示幻灯片？谢谢carl

我已经更新了您的代码，基本上，如果您从容器中删除display:none并用javascript隐藏它，它将允许bxslider计算图像的大小，我相信只有在加载后调整屏幕大小时才会这样做。

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

编辑

同样需要注意的是，不要使用b——适当的元素是强的，但在这种情况下，你应该只将font-weight:bold应用于css，并避免使用内联样式。

相关文章：