• On the mobile and tablet versions of my home page, I have an image carousel that shows the company’s partners.

    It starts doing the carousel immediately when the page loads. I want it instead to do the carousel only when the user scrolls the page to it, i.e. when the user first starts to see it. That way the first image the user sees is the IBM logo.

    Is it possible to control when the animation starts? I’m using the Deon theme, and the specific widget I’m using for the carousel is called the “Clients Carousel” that I got from a plugin called “Qi Addons For Elementor”. However I’m perfectly willing to use any other widget from any plugin if it allows me to control when the animation begins.

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)
  • Moderator bcworkz

    (@bcworkz)

    The solution depends on what is triggering the carousel to start in the first place. Assuming it runs via a script, it’s likely triggered by the page load event. It’s possible to alter script to be triggered when a certain scroll position is reached.

    For specifics on how that can be accomplished, I recommend asking the plugin’s devs through their dedicated support channel. They know their own code best and would be in the best position to help you.

    Thread Starter hellopeepeepoopoo

    (@hellopeepeepoopoo)

    @bcworkz already raised a support ticket with Deon, they said they don’t provide this level of customization to their customers. 

    I want to do it by myself but I don’t know how to find the specific script that triggers the carousel. How exactly in chrome’s developer tools do you find the script associated with an element?

    Moderator bcworkz

    (@bcworkz)

    Use the element inspector tool. Where the CSS rules are normally listed, go to the Event Listeners tab. Expand a likely event like DOMContentLoaded. Remove a likely candidate using the appropriate button. Click the refresh icon (circular arrow) above. If you removed the right script (or one of its dependencies), the carousel will fail to run. If it still runs, reload the entire page (Ctrl-R) to start over and try something else.

    Because you could possibly disable a dependency and not the script you’re looking for and you’d observe the same behavior, this is not a definitive process. It’s just a way to narrow down where to search further. You can further examine the script source code in the Sources developer tool. If the source code is minified, it’ll be difficult to understand what it’s doing, but there should be a similar named file in the same directory without the .min in its file name that is the original source.

    Thread Starter hellopeepeepoopoo

    (@hellopeepeepoopoo)

    @bcworkz “Expand a likely event like DOMContentLoaded. Remove a likely candidate using the appropriate button. Click the refresh icon (circular arrow) above”

    Hi I tried this and the carousel did not stop. In fact I removed every single script in the Event Listeners Tab and none of the animations on the page stopped working. Is it possible I need to do something other than pressing the refresh icon in the Events Listener Tab?

    Moderator bcworkz

    (@bcworkz)

    TBH, I’ve little experience using that tool to debug scripts. That should be all that’s needed, but I don’t know for sure.

    It is possible (I think, but again not 100% sure) that the carousel is CSS driven and no script is involved. Go back to to the Styles tab with CSS rules. In the other panel with the source HTML, click on the overall carousel div container. Check the CSS rules for anything involving animation. When you hover over the rule a checkbox will appear. Un-check the rule and it will no longer be used on the page. You may need to check some other inner div containers to find the element that has related animation rules.

    Thread Starter hellopeepeepoopoo

    (@hellopeepeepoopoo)

    @bcworkz I found the code that controls the plugin, it’s in main.js:

    $(document).ready(
      function() {
        qodefSwiper.init();
      }
    );
    
    /**
     * Init swiper slider
     */
    var qodefSwiper = {
      init: function(settings) {
        this.holder = $('.qodef-swiper-container');
    
        // Allow overriding the default config
        $.extend(this.holder, settings);
    
        if (this.holder.length) {
          this.holder.each(
            function() {
              qodefSwiper.initSlider($(this));
            }
          );
        }
      },
      initSlider: function($currentItem) {
        var options = qodefSwiper.getOptions($currentItem),
          events = qodefSwiper.getEvents($currentItem, options);
    
        var $swiper = new Swiper($currentItem, Object.assign(options, events));
      },
      getOptions: function($holder, returnBreakpoints) {
        var sliderOptions = typeof $holder.data('options') !== 'undefined' ? $holder.data('options') : {},
          direction = sliderOptions.direction !== undefined && sliderOptions.direction !== '' ? sliderOptions.direction : 'horizontal',
          spaceBetween = sliderOptions.spaceBetween !== undefined && sliderOptions.spaceBetween !== '' ? sliderOptions.spaceBetween : 0,
          slidesPerView = sliderOptions.slidesPerView !== undefined && sliderOptions.slidesPerView !== '' ? sliderOptions.slidesPerView : 1,
          centeredSlides = sliderOptions.centeredSlides !== undefined && sliderOptions.centeredSlides !== '' ? sliderOptions.centeredSlides : false,
          sliderScroll = sliderOptions.sliderScroll !== undefined && sliderOptions.sliderScroll !== '' ? sliderOptions.sliderScroll : false,
          loop = sliderOptions.loop !== undefined && sliderOptions.loop !== '' ? sliderOptions.loop : true,
          autoplay = sliderOptions.autoplay !== undefined && sliderOptions.autoplay !== '' ? sliderOptions.autoplay : true,
          speed = sliderOptions.speed !== undefined && sliderOptions.speed !== '' ? parseInt(sliderOptions.speed, 10) : 5000,
          speedAnimation = sliderOptions.speedAnimation !== undefined && sliderOptions.speedAnimation !== '' ? parseInt(sliderOptions.speedAnimation, 10) : 800,
          slideAnimation = sliderOptions.slideAnimation !== undefined && sliderOptions.slideAnimation !== '' ? sliderOptions.slideAnimation : '',
          customStages = sliderOptions.customStages !== undefined && sliderOptions.customStages !== '' ? sliderOptions.customStages : false,
          outsideNavigation = sliderOptions.outsideNavigation !== undefined && sliderOptions.outsideNavigation === 'yes',
          nextNavigation = outsideNavigation ? '.swiper-button-next-' + sliderOptions.unique : $holder.find('.swiper-button-next'),
          prevNavigation = outsideNavigation ? '.swiper-button-prev-' + sliderOptions.unique : $holder.find('.swiper-button-prev'),
          pagination = $holder.find('.swiper-pagination');
    
        if (autoplay !== false && speed !== 5000) {
          autoplay = {
            delay: speed
          };
        }
    
        var slidesPerView1440 = sliderOptions.slidesPerView1440 !== undefined && sliderOptions.slidesPerView1440 !== '' ? parseInt(sliderOptions.slidesPerView1440, 10) : 5,
          slidesPerView1366 = sliderOptions.slidesPerView1366 !== undefined && sliderOptions.slidesPerView1366 !== '' ? parseInt(sliderOptions.slidesPerView1366, 10) : 4,
          slidesPerView1024 = sliderOptions.slidesPerView1024 !== undefined && sliderOptions.slidesPerView1024 !== '' ? parseInt(sliderOptions.slidesPerView1024, 10) : 3,
          slidesPerView768 = sliderOptions.slidesPerView768 !== undefined && sliderOptions.slidesPerView768 !== '' ? parseInt(sliderOptions.slidesPerView768, 10) : 2,
          slidesPerView680 = sliderOptions.slidesPerView680 !== undefined && sliderOptions.slidesPerView680 !== '' ? parseInt(sliderOptions.slidesPerView680, 10) : 1,
          slidesPerView480 = sliderOptions.slidesPerView480 !== undefined && sliderOptions.slidesPerView480 !== '' ? parseInt(sliderOptions.slidesPerView480, 10) : 1;
    
        if (!customStages) {
          if (slidesPerView < 2) {
            slidesPerView1440 = slidesPerView;
            slidesPerView1366 = slidesPerView;
            slidesPerView1024 = slidesPerView;
            slidesPerView768 = slidesPerView;
          } else if (slidesPerView < 3) {
            slidesPerView1440 = slidesPerView;
            slidesPerView1366 = slidesPerView;
            slidesPerView1024 = slidesPerView;
          } else if (slidesPerView < 4) {
            slidesPerView1440 = slidesPerView;
            slidesPerView1366 = slidesPerView;
          } else if (slidesPerView < 5) {
            slidesPerView1440 = slidesPerView;
          }
        }
    
        if (direction === 'vertical') {
          slidesPerView = 1;
        }
    
        var options = {
          direction: direction,
          slidesPerView: slidesPerView,
          centeredSlides: centeredSlides,
          sliderScroll: sliderScroll,
          spaceBetween: spaceBetween,
          autoplay: autoplay,
          loop: loop,
          speed: speedAnimation,
          navigation: {
            nextEl: nextNavigation,
            prevEl: prevNavigation
          },
          pagination: {
            el: pagination,
            type: 'bullets',
            clickable: true
          },
          breakpoints: {
            // when window width is < 481px
            0: {
              slidesPerView: slidesPerView480
            },
            // when window width is >= 481px
            481: {
              slidesPerView: slidesPerView680
            },
            // when window width is >= 681px
            681: {
              slidesPerView: slidesPerView768
            },
            // when window width is >= 769px
            769: {
              slidesPerView: slidesPerView1024
            },
            // when window width is >= 1025px
            1025: {
              slidesPerView: slidesPerView1366
            },
            // when window width is >= 1367px
            1367: {
              slidesPerView: slidesPerView1440
            },
            // when window width is >= 1441px
            1441: {
              slidesPerView: slidesPerView
            }
          },
        };
    
        if (slideAnimation.length) {
          switch (slideAnimation) {
            case 'fade':
              options.effect = 'fade';
              options.fadeEffect = {
                crossFade: true
              };
    
              break;
          }
        }
    
        return Object.assign(options, qodefSwiper.getSliderDatas($holder));
      },
      getSliderDatas: function($holder) {
        var dataList = $holder.data(),
          returnValue = {};
    
        for (var property in dataList) {
          if (dataList.hasOwnProperty(property)) {
            // It's required to be different from data options because da options are all options from shortcode element
            if (property !== 'options' && typeof dataList[property] !== 'undefined' && dataList[property] !== '') {
              returnValue[property] = dataList[property];
            }
          }
        }
    
        return returnValue;
      },
      getEvents: function($holder, options) {
        return {
          on: {
            beforeInit: function() {
              if (options.direction === 'vertical') {
                var height = 0;
                var currentHeight = 0;
                var $item = $holder.find('.qodef-e');
    
                if ($item.length) {
                  $item.each(
                    function() {
                      currentHeight = $(this).outerHeight();
    
                      if (currentHeight > height) {
                        height = currentHeight;
                      }
                    }
                  );
                }
                $holder.css('height', height);
                $item.css('height', height);
              }
            },
            init: function() {
              $holder.addClass('qodef-swiper--initialized');
    
              qodef.body.trigger(
                'deon_trigger_swiper_is_initialized',
                [$holder, options]
              );
    
              if (options.sliderScroll) {
                var scrollStart = false;
    
                $holder.on(
                  'mousewheel',
                  function(e) {
                    e.preventDefault();
    
                    if (!scrollStart) {
                      scrollStart = true;
    
                      if (e.deltaY < 0) {
                        $holder[0].swiper.slideNext();
                      } else {
                        $holder[0].swiper.slidePrev();
                      }
    
                      setTimeout(
                        function() {
                          scrollStart = false;
                        },
                        1000
                      );
                    }
                  }
                );
              }
            }
          }
        };
      }
    };
    
    qodef.qodefSwiper = qodefSwiper;

    How do I change qodefSlider so that it only starts autoplay when in view?

    Thanks.

    Moderator bcworkz

    (@bcworkz)

    You’d at least turn off autoplay and maybe do something with sliderScroll, but I don’t know what. Set it to true? Not sure, don’t really know what it does.

    var options = {
          direction: direction,
          slidesPerView: slidesPerView,
          centeredSlides: centeredSlides,
          sliderScroll: true,
          spaceBetween: spaceBetween,
          autoplay: false,
    //etc....

    You need to find what function to call to initiate the slider animation, then call it from a scroll event listener when the Y scroll position is greater than a certain value.

    Thread Starter hellopeepeepoopoo

    (@hellopeepeepoopoo)

    @bcworkz How do I change the value of autoplay?

    The only function that I can see is qodefSwiper.init();

    Thanks.

    Moderator bcworkz

    (@bcworkz)

    Search the script’s file in a plain text editor for “autoplay:”. If there is more than one instance found, look for the instance that looks like my earlier example, except it’ll initially read autoplay: autoplay,. Edit to make the second word false,. Save the edit. (after first making a backup copy of the original)

    As I said, this should stop the autoplay on page load, but you still need to find a function to call to start the animation.

    Thread Starter hellopeepeepoopoo

    (@hellopeepeepoopoo)

    @bcworkz after setting autoplay to false on page load, how do I then set it to true when user scrolls to it? I know this should be inside a scroll listener but how exactly do you set autoplay to true?

    I found “autoplay” inside the getOptions function:

    autoplay = sliderOptions.autoplay !== undefined && sliderOptions.autoplay !== '' ? sliderOptions.autoplay : true,

    and also found this

    if (autoplay !== false && speed !== 5000) { autoplay = { delay: speed }; }

    and of course in var options:

    autoplay: autoplay,

    I can’t find any function related to qodefSwiper besides init(). There doesn’t seem to be a function to start autoplay.

    Moderator bcworkz

    (@bcworkz)

    Sorry, I don’t know. You’re better off seeking advice from the QI Addons devs through their dedicated support channel.

    The thought occurred to me to try calling init() only after the scroll position is reached, but it looks like init() does some initial container sizing at that time, so the static carousel appearance would not be optimal. If you can get its initial appearance looking OK with CSS alone, maybe it wouldn’t matter? Then you’d restore the autoplay: autoplay, value and call init() from the scroll listener instead of $(document).ready.

    Thread Starter hellopeepeepoopoo

    (@hellopeepeepoopoo)

    @bcworkz I tried seeking advice from official Deon support but they don’t provide help with CSS or coding.

    Is it possible perhaps that I first call the init(); while setting autoplay to false, when the page loads, and then when the user scrolls to the position of the carousel then set autoplay to true and call the init(); function again. So can I call the init(); function twice? Would that cause issues?

    Moderator bcworkz

    (@bcworkz)

    As long as you can revert whatever you do, doesn’t hurt to try 🙂 May as well try, as I’m out of ideas.

    Thread Starter hellopeepeepoopoo

    (@hellopeepeepoopoo)

    @bcworkz Ok thanks. I’ll try it and report the results.

    Thread Starter hellopeepeepoopoo

    (@hellopeepeepoopoo)

    @bcworkz hey, I’m still stumped about how to set autoplay to true or false outside of the declaration of qodefSwiper. Meaning can I call a function like this: qodefSwiper.setAutoplayValue(aValue); ?

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘How to force an image carousel to only start animating when the user views it?’ is closed to new replies.