javascript - Slider Revolution 幻灯片过渡不起作用

Question

我在网站上使用 jQuery 版本的 Slider Revolution。我已经多次使用它而没有问题，但在这种情况下，我的幻灯片过渡效果不佳。我尝试了几种不同的过渡，但没有成功，但其他一切都很完美。我在控制台中没有收到任何错误，而且我的想法已经用完了。

这是我使用的标记:

<div id="rev_slider_1" class="rev_slider" data-version="5.4.1" style="display:none;">
<ul>

    <li data-transition="fade">
        <!-- SLIDE'S MAIN BACKGROUND IMAGE -->

            <div class="kicker-promo no-margin">
                <a href="/">
                    <img alt="" class="kicker-promo-img" src="http://s7d9.scene7.com/is/image/AmericanApparel/aa_web_hp_update_040918_desktop_01_us?qlt=90,1" class="rev-slidebg">
                    <img alt="" class="kicker-promo-img-overlay" src="http://s7d9.scene7.com/is/image/AmericanApparel/aa_web_hp_update_040918_desktop_01_overlay_us?qlt=90,1" class="rev-slidebg">
                </a>
            </div>

    </li>

    <li data-transition="fade">
        <!-- SLIDE'S MAIN BACKGROUND IMAGE -->

            <div class="kicker-promo no-margin">
                <a href="/">
                    <img alt="" class="kicker-promo-img" src="http://s7d9.scene7.com/is/image/AmericanApparel/aa_web_hp_update_040918_desktop_02_us?qlt=90,1" class="rev-slidebg">
                    <img alt="" class="kicker-promo-img-overlay" src="http://s7d9.scene7.com/is/image/AmericanApparel/aa_web_hp_update_040918_desktop_02_overlay_us?qlt=90,1" class="rev-slidebg">
                </a>
            </div>

    </li>
</ul>

slider 设置:

<script type="text/javascript">

/* https://learn.jquery.com/using-jquery-core/document-ready/ */
jQuery(document).ready(function() {

    /* initialize the slider based on the Slider's ID attribute */
    jQuery('#rev_slider_1').show().revolution({

    sliderType:"standard",
    sliderLayout:"auto",
    dottedOverlay:"none",
    delay:3000,
    navigation: {
        keyboardNavigation:"off",
        keyboard_direction: "horizontal",
        mouseScrollNavigation:"off",
        mouseScrollReverse:"default",
        onHoverStop:"off",
        touch:{
            touchenabled:"on",
            swipe_threshold: 75,
            swipe_min_touches: 1,
            swipe_direction: "horizontal",
            drag_block_vertical: false
        }
        ,
        bullets: {
            enable: true,
            style: 'hermes',
            container: 'slider',
            h_align: 'center',
            v_align: 'bottom',
            h_offset: 0,
            v_offset: 20,
            space: 5
        }
    },
    viewPort: {
        enable:true,
        outof:"pause",
        visible_area:"100%",
        presize:false
    },
    responsiveLevels:[1240,1024,778,480],
    visibilityLevels:[1240,1024,778,480],
    gridwidth:[1230,1024,767,480],
    gridheight:[720,720,480,360],
    lazyType:"none",
    parallax: {
        type:"scroll",
        origo:"enterpoint",
        speed:400,
        levels:[5,10,15,20,25,30,35,40,45,50,46,47,48,49,50,55],
        type:"scroll",

    },
    shadow:0,
    spinner:"off",
    stopLoop:"off",
    stopAfterLoops:-1,
    stopAtSlide:-1,
    shuffle:"off",
    autoHeight:"off",
    hideThumbsOnMobile:"off",
    hideSliderAtLimit:0,
    hideCaptionAtLimit:0,
    hideAllCaptionAtLilmit:0,
    debugMode:false,
    fallbacks: {
        simplifyAll:"off",
        nextSlideOnWindowFocus:"off",
        disableFocusListener:false,
    }
    });
});
</script>

另一件可能值得注意的事情是，我在这个特定页面上运行了 slider 的三个实例。它们几乎完全相同，并且除了过渡之外都具有功能。

Answer 1

  // This should work fine!

 $(document).ready(function(e) {
        $(".rev_slider").revolution({
          sliderType:"standard",
          sliderLayout: "auto",
          dottedOverlay: "none",
          delay: 3000,
          navigation: {
              keyboardNavigation: "off",
              keyboard_direction: "horizontal",
              mouseScrollNavigation: "off",
              onHoverStop: "off",
              touch: {
                  touchenabled: "on",
                  swipe_threshold: 75,
                  swipe_min_touches: 1,
                  swipe_direction: "horizontal",
                  drag_block_vertical: false
              },
            bullets: {
              enable:true,
              hide_onmobile:true,
              hide_under:600,
              style:"metis",
              hide_onleave:true,
              hide_delay:200,
              hide_delay_mobile:1200,
              direction:"horizontal",
              h_align:"center",
              v_align:"bottom",
              h_offset:0,
              v_offset:30,
              space:5,

            }
          },
          responsiveLevels: [1240, 1024, 778],
          visibilityLevels: [1240, 1024, 778],
          gridwidth: [1170, 1024, 778, 480],
          gridheight: [600, 768, 960, 720],
          lazyType: "none",
          parallax: {
              origo: "slidercenter",
              speed: 1000,
              levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 46, 47, 48, 49, 50, 100, 55],
              type: "scroll"
          },
          shadow: 0,
          spinner: "off",
          stopLoop: "on",
          stopAfterLoops: 0,
          stopAtSlide: -1,
          shuffle: "off",
          autoHeight: "off",
          fullScreenAutoWidth: "off",
          fullScreenAlignForce: "off",
          fullScreenOffsetContainer: "",
          fullScreenOffset: "0",
          hideThumbsOnMobile: "off",
          hideSliderAtLimit: 0,
          hideCaptionAtLimit: 0,
          hideAllCaptionAtLilmit: 0,
          debugMode: false,
          fallbacks: {
              simplifyAll: "off",
              nextSlideOnWindowFocus: "off",
              disableFocusListener: false,
          }
        });
      });