如何让bxSlider隐藏幻灯片，直到页面加载？ [英] How to get bxSlider to hide the slides until the page loads?

问题描述

我正在建立一个使用 bxSlider 的网站。

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.

我试过使用各种CSS和bxSlider回调来隐藏幻灯片，直到页面完全加载，但没有运气。

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?

推荐答案

bxslider在加载滑块时有一个回调（onSliderLoad）。我将可见性设置为在容器div上隐藏，然后使用回调将可见性设置为visible。

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

这篇关于如何让bxSlider隐藏幻灯片，直到页面加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！