Slider Revolution slide transitions not working

Question

I am using the jQuery version of Slider Revolution on a site. I've used this on several occasions without issue, but in this case, my slide transitions are failing to work. I have attempted several different transitions, and non work, but everything else works perfectly. I get no errors in the console and am running out of ideas.

Here's the mark up I am using:

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

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

Another thing possibly worth noting is that I am running three instances of the slider on this particular page. They are all pretty much identical and are functional besides the transitions.

What happens if you remove the other sliders to have only one in your page? What is the verson of the librairy you are using? — Mathieu de Lorimier, Apr 03 '18 at 18:34
Just as a gutcheck, you're only including the library once, and it's before you're calling it in these scripts, right? — jmcgriz, Apr 04 '18 at 20:12
This question is incomplete. The reasons can be infinite on the basis of how you are asking. Please be specific about what you asked and atleast provide short reproducible snippet. Only assigning a bounty would not guarantee a best answer. — Kiran Shakya, Apr 05 '18 at 08:12
can you complete this codepen? https://codepen.io/ZPiDER/pen/rdZXZm i cannot get the revolution slider includes to work correctly. it will be easier for everyone to work with a complete pen. — ZPiDER, Apr 05 '18 at 13:29

richard4s · Answer 1 · 2018-04-06T14:36:43.510

  // 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,
          }
        });
      });

Slider Revolution slide transitions not working

1 Answers1