Tabs - Swipe To Change Between Them? - Question | JoomShaper

Tabs - Swipe To Change Between Them?

I

Ingenium

Feature Request 1 week ago

Hey Team!

I am using the Tabs for a few elements in my page, for example here: https://educontest.aufbaustudium.at/studium/elektrotechnik#studienplan

And I was thinking, that it would be great that if it's on mobile view, that users could swipe left and right in order to navigate between the items?

The reason is, that as of now, users would have to scroll back up and then tap on the tap they want to navigate to. I think it would improve the UX, if they could just swipe to the right.

Sorry if I am missing something, but I think that is not implemented (yet?).

Best, Kajetan

0
3 Answers
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 week ago #224446

Apologies for the inconvenience.

Unfortunately, there is no built-in feature for swipe navigation between tabs in this component at the moment. However, a similar user experience can be achieved using a small custom JavaScript enhancement.

Please add the following JS code to your Template Options → Custom Code → Custom JS section:

(function ($) {
  "use strict";

  function initTabSwipe() {

    $('.sppb-addon-tab').each(function () {

      const $container = $(this);
      const $tabContent = $container.find('.sppb-tab-content').get(0);
      const $tabLinks = $container.find('.sppb-nav li a');

      if (!$tabContent || $tabContent.dataset.swipeInit) return;

      $tabContent.dataset.swipeInit = "true";

      let startX = 0;
      let endX = 0;

      $tabContent.addEventListener('touchstart', function (e) {
        startX = e.changedTouches[0].screenX;
      }, { passive: true });

      $tabContent.addEventListener('touchend', function (e) {
        endX = e.changedTouches[0].screenX;

        const diff = startX - endX;
        const threshold = 60;

        if (Math.abs(diff) < threshold) return;

        let activeIndex = 0;

        $tabLinks.each(function (i) {
          if ($(this).parent().hasClass('active')) {
            activeIndex = i;
          }
        });

        // swipe left → next tab
        if (diff > 0 && activeIndex < $tabLinks.length - 1) {
          $tabLinks.eq(activeIndex + 1).trigger('click');
        }

        // swipe right → previous tab
        if (diff < 0 && activeIndex > 0) {
          $tabLinks.eq(activeIndex - 1).trigger('click');
        }

      }, { passive: true });

    });

  }

  // Init on load
  $(document).ready(function () {
    initTabSwipe();
  });

  // Optional: re-init if SPPB loads dynamically (AJAX / builder edits)
  $(window).on('load', function () {
    initTabSwipe();
  });

})(jQuery);

After applying this change, please clear both your Joomla cache and your browser cache to ensure the script is loaded correctly.

This will enable left/right swipe gestures on mobile devices, providing a much smoother tab navigation experience similar to native mobile interfaces.

1
I
Ingenium
Accepted Answer
1 week ago #224448

Awesome, that worked! Thank you so much for the fast reply!

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 week ago #224449

Good to hear it’s working as expected.

0