_auto_rotate_powerpack_tabs.md

Auto rotate beaver builder powerpack addons "advanced tabs" module

Inspired and copied from this jquery plugin code https://vdw.github.io/Tabslet/ Documentation can be found here https://github.com/vdw/Tabslet/wiki

Render both js files in footer defered

The code was modified to work with powerpacks advanced tabs modules

auto_rotate_powerpack_tabs_base_logic.js

/**
 * Tabslet | tabs jQuery plugin
 *
 * @copyright Copyright 2015, Dimitris Krestos
 * @license   Apache License, Version 2.0 (http://www.opensource.org/licenses/apache2.0.php)
 * @link      http://vdw.staytuned.gr
 * @version   v1.7.3
 */

(function ($, window, undefined) {
    "use strict";

    $.fn.tabslet = function (options) {
        var defaults = {
            mouseevent: "click",
            activeclass: "pp-tab-active",
            attribute: "href",
            animation: false,
            autorotate: false,
            deeplinking: false,
            pauseonhover: true,
            delay: 2000,
            active: 1,
            container: false,
            controls: {
                prev: ".prev",
                next: ".next",
            },
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
            var $this = $(this),
                _cache_li = [],
                _cache_div = [];
            var _container = options.container ? $(options.container) : $this;

            // Autorotate
            var elements = $this.find("> .pp-tabs-labels > .pp-tabs-label"),
                i = options.active - 1; // ungly

            if (!$this.data("tabslet-init")) {
                $this.data("tabslet-init", true);

                $this.opts = [];

                $.map(
                    [
                        "mouseevent",
                        "activeclass",
                        "attribute",
                        "animation",
                        "autorotate",
                        "deeplinking",
                        "pauseonhover",
                        "delay",
                        "container",
                    ],
                    function (val, i) {
                        $this.opts[val] = $this.data(val) || options[val];
                    }
                );

                $this.opts["active"] = $this.opts.deeplinking
                    ? deep_link()
                    : $this.data("active") || options.active;

                if ($this.opts.active) {
                    elements
                        .eq($this.opts.active - 1)
                        .addClass(options.activeclass)
                        .trigger("click");
                }

                var fn = eval(function (e, tab) {
                    var _this = tab
                        ? elements
                              .find(
                                  "id[" +
                                      $this.opts.attribute +
                                      '="' +
                                      tab +
                                      '"]'
                              )
                              .parent()
                        : $(this);

                    _this.trigger("_before");

                    elements.removeClass(options.activeclass);
                    _this.addClass(options.activeclass);
                    //  _tabs.hide();

                    i = elements.index(_this);

                    var currentTab =
                        tab || _this.find("div").attr($this.opts.attribute);

                    if ($this.opts.deeplinking) location.hash = currentTab;

                    if ($this.opts.animation) {
                        _container
                            .find(currentTab)
                            .animate({ opacity: "show" }, "slow", function () {
                                _this.trigger("_after");
                            });
                    } else {
                        _container.find(currentTab).show();
                        _this.trigger("_after");
                    }

                    return false;
                });

                var init = eval("elements." + $this.opts.mouseevent + "(fn)");

                init;

                var t;

                var forward = function () {
                    i = ++i % elements.length; // wrap around

                    $this.opts.mouseevent == "hover"
                        ? elements.eq(i).trigger("mouseover")
                        : elements.eq(i).trigger("click");

                    if ($this.opts.autorotate) {
                        clearTimeout(t);

                        t = setTimeout(forward, $this.opts.delay);

                        $this
                            .find(
                                "> .pp-tabs-labels > .pp-tabs-label.pp-tab-active"
                            )
                            .mouseover(function () {
                                if ($this.opts.pauseonhover) clearTimeout(t);
                            });
                    }
                };

                if ($this.opts.autorotate) {
                    t = setTimeout(forward, $this.opts.delay);

                    $this.find("> .pp-tabs-labels > .pp-tabs-label").hover(
                        function () {
                            if ($this.opts.pauseonhover) clearTimeout(t);
                        },
                        function () {
                            t = setTimeout(forward, $this.opts.delay);
                        }
                    );

                    if ($this.opts.pauseonhover)
                        $this
                            .find(
                                "> .pp-tabs-labels > .pp-tabs-label.pp-tab-active"
                            )
                            .on("mouseleave", function () {
                                clearTimeout(t);
                                t = setTimeout(forward, $this.opts.delay);
                            });
                }

                $this
                    .find("> .pp-tabs-labels > .pp-tabs-label.pp-tab-active")
                    .on("mouseleave", function () {
                        clearTimeout(t);
                        t = setTimeout(forward, $this.opts.delay);
                    });

                function deep_link() {
                    var ids = [];

                    elements.find("a").each(function () {
                        ids.push($(this).attr($this.opts.attribute));
                    });

                    var index = $.inArray(location.hash, ids);

                    if (index > -1) {
                        return index + 1;
                    } else {
                        return $this.data("active") || options.active;
                    }
                }

                var move = function (direction) {
                    if (direction == "forward") i = ++i % elements.length; // wrap around

                    if (direction == "backward") i = --i % elements.length; // wrap around

                    elements.eq(i).trigger("click");
                    elements.eq(i).scrollIntoView(false);
                    elements.eq(i).focus({
                        preventScroll: true,
                    });
                    elements.eq(i).blur();
                };

                $this.find(options.controls.next).trigger(function () {
                    move("forward");
                });

                $this.find(options.controls.prev).trigger(function () {
                    move("backward");
                });

                $this.on("show", function (e, tab) {
                    fn(e, tab);
                });

                $this.on("next", function () {
                    move("forward");
                });

                $this.on("prev", function () {
                    move("backward");
                });

                $this.on("destroy", function () {
                    $(this)
                        .removeData()
                        .find("> .pp-tabs-labels div")
                        .each(function (i) {
                            $(this).removeClass(options.activeclass);
                        });
                });
            }
        });
    };

    $(document).ready(function () {
        $('[data-toggle="tabslet"]').tabslet();
    });
})(jQuery);

//add this to prevent autorotate from scrolling the page
jQuery(document).ready(function ($) {
    $(".pp-tabs-label")
        .off()
        .click(function (e) {
            e.preventDefault();
            e.target.focus({ preventScroll: true });
            e.stopPropagation();
        });

    $(".pp-tabs-label").mousedown(function (e) {
        e.stopImmediatePropagation(); //stops event bubbling
        e.preventDefault(); //stops default browser action (focus)
    });

});

auto_rotate_powerpack_tabs_intitialize.js

jQuery(document).ready(function ($) {
  //can modify the target if there are multiple tabs on the site or same page
    $(".pp-tabs").tabslet({
        autorotate: true,
        delay: 10000,
        attribute: "alt",
        mouseevent: "click",
        deeplinking: false,
        pauseonhover: true,
        active: Math.floor(Math.random() * 5) + 1, //start the slide at a random location each time, change 5 to number of slides
    });
});