hellopeepeepoopoo

@ggedenidze1982 I’m just sent the email you requested.

@papai40515 Thank you for the response. I know I can create it using custom code but that would take too much time. Is there a widget that comes with it already?

@aurangajeb Thank you very much. I tried your suggestions and am hoping this will fix it in a few days.

@israelaz If it’s not available in Elementor options then how do you directly edit the code that Elementor uses?

@israelaz Hi thank you for your response but you didn’t answer the question. How do I prevent hidden sections from loading, or only allow them to load after the page has already loaded? They are having a massive effect on page loading speed, as I have tested and verified this.

@threadi in any case, do you know how to fix the issue? ??

@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); ?

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

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

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

• This reply was modified 2 years ago by hellopeepeepoopoo.
• This reply was modified 2 years ago by hellopeepeepoopoo.

@bcworkz How do I change the value of autoplay?

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

Thanks.

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

• This reply was modified 2 years ago by hellopeepeepoopoo.
• This reply was modified 2 years ago by 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?

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

• This reply was modified 2 years ago by hellopeepeepoopoo.
• This reply was modified 2 years ago by hellopeepeepoopoo.
• This reply was modified 2 years ago by hellopeepeepoopoo.