tab-2.php
165 lines
| 1 | <?php |
| 2 | if (!defined('ABSPATH')) { |
| 3 | exit; // Exit if accessed directly. |
| 4 | } |
| 5 | ?> |
| 6 | <section class="header_tabs_area spel-tabs"> |
| 7 | <div class="header_tab_items sticky_tab_item tabs_sliders<?php echo esc_attr($navigation_arrow_class . $sticky_tab_class); ?>"> |
| 8 | <span class="scroller-btn left" id="scroll_left_btn"><i class="arrow_carrot-left"></i></span> |
| 9 | <ul class="nav nav-tabs slide_nav_tabs spel-tab-menu<?php echo esc_attr($tab_auto_class); ?>" <?php echo esc_attr($data_auto_play); ?>> |
| 10 | <?php |
| 11 | $i = 0.2; |
| 12 | if ( is_array($tabs) && !empty($tabs) ) { |
| 13 | foreach ( $tabs as $index => $item ) { |
| 14 | $tab_count = $index + 1; |
| 15 | $tab_title_setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $index); |
| 16 | $active = $tab_count == 1 ? 'active' : ''; |
| 17 | $selected = $tab_count == 1 ? 'true' : 'false'; |
| 18 | $this->add_render_attribute($tab_title_setting_key, [ |
| 19 | 'class' => [ 'nav-link tab-item-title', $active ], |
| 20 | 'data-rel' => 'tab-content-' . $id_int . $tab_count, |
| 21 | 'id' => 'docy'.'-tab-'.$id_int . $tab_count, |
| 22 | ]); |
| 23 | ?> |
| 24 | <li class="nav-item wow fadeInUp" data-wow-delay="<?php echo esc_attr($i); ?>s"> |
| 25 | <button <?php echo $this->get_render_attribute_string($tab_title_setting_key); ?>> |
| 26 | <?php |
| 27 | if ( $is_auto_play == 'yes' ) { ?> |
| 28 | <div class="tab_progress"> |
| 29 | <div class="progress-bar"></div> |
| 30 | </div> |
| 31 | <?php |
| 32 | } |
| 33 | if ( $is_auto_numb == 'yes' ) { ?> |
| 34 | <span class="numb"><?php echo esc_html($tab_count) ?></span> |
| 35 | <?php |
| 36 | } |
| 37 | if ( !empty($item['icon']['value']) ) { |
| 38 | \Elementor\Icons_Manager::render_icon($item['icon']); |
| 39 | } |
| 40 | if ( !empty($item['tab_title']) ) { |
| 41 | echo esc_html($item[ 'tab_title' ]); |
| 42 | } |
| 43 | ?> |
| 44 | </button> |
| 45 | </li> |
| 46 | <?php |
| 47 | $i = $i + 0.2; |
| 48 | } |
| 49 | } |
| 50 | ?> |
| 51 | </ul> |
| 52 | <span class="scroller-btn right" id="scroll_right_btn"><i class="arrow_carrot-right"></i></span> |
| 53 | </div> |
| 54 | <div class="header_tab_content"> |
| 55 | <div class="tab-content"> |
| 56 | <?php |
| 57 | if (is_array($tabs) && !empty($tabs)) { |
| 58 | foreach ( $tabs as $index => $item ) { |
| 59 | $tab_count = $index + 1; |
| 60 | $active = $tab_count == 1 ? 'show active' : ''; |
| 61 | $tab_content_setting_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index); |
| 62 | $this->add_render_attribute($tab_content_setting_key, [ |
| 63 | 'class' => [ 'tab-pane p-0 tab_style tab-box', 'fade', $active ], |
| 64 | 'id' => 'tab-content-' . $id_int . $tab_count, |
| 65 | ]); |
| 66 | ?> |
| 67 | <div <?php echo $this->get_render_attribute_string($tab_content_setting_key); ?>> |
| 68 | <?php |
| 69 | if ('content' == $item[ 'tabs_content_type' ]) { |
| 70 | echo do_shortcode($item[ 'tab_content' ]); |
| 71 | } elseif ('template' == $item[ 'tabs_content_type' ]) { |
| 72 | if (!empty($item[ 'primary_templates' ])) { |
| 73 | echo \Elementor\plugin::$instance->frontend->get_builder_content($item[ 'primary_templates' ], true); |
| 74 | } |
| 75 | } |
| 76 | ?> |
| 77 | </div> |
| 78 | <?php |
| 79 | } |
| 80 | } |
| 81 | if ($is_navigation_arrow == 'yes') { ?> |
| 82 | <button class="btn btn-info tab_arrow_btn previous"><i class="arrow_carrot-left"></i></button> |
| 83 | <button class="btn btn-info tab_arrow_btn next"><i class="arrow_carrot-right"></i></button> |
| 84 | <?php |
| 85 | } |
| 86 | ?> |
| 87 | </div> |
| 88 | </div> |
| 89 | </section> |
| 90 | |
| 91 | <?php |
| 92 | if ( $is_auto_play == 'yes' ) { |
| 93 | ?> |
| 94 | <script> |
| 95 | (function ($) { |
| 96 | 'use strict'; |
| 97 | |
| 98 | $(document).ready(function () { |
| 99 | const intervalDuration = 5000; // Set the interval duration in milliseconds |
| 100 | let currentIndex = 0; // Start with the first tab |
| 101 | const tabBtns = $(".spel-tab-menu li button"); |
| 102 | const progressBars = $(".spel-tab-menu .progress-bar"); |
| 103 | let autoplayInterval; |
| 104 | |
| 105 | // Function to reset and start the progress bar animation |
| 106 | function startProgressBar(index) { |
| 107 | progressBars.width(0); // Reset all progress bars |
| 108 | progressBars.eq(index).css("transition-duration", `${intervalDuration}ms`).width("100%"); // Animate the current progress bar |
| 109 | } |
| 110 | |
| 111 | // Function to switch tabs |
| 112 | function changeTab(index) { |
| 113 | tabBtns.removeClass("active"); // Remove active class from all tabs |
| 114 | progressBars.width(0); // Reset all progress bars |
| 115 | tabBtns.eq(index).addClass("active"); // Activate the current tab |
| 116 | |
| 117 | const target = tabBtns.eq(index).attr("data-rel"); |
| 118 | $("#" + target) |
| 119 | .addClass("active show") |
| 120 | .siblings(".tab-box") |
| 121 | .removeClass("active show"); |
| 122 | |
| 123 | startProgressBar(index); // Start progress bar for the current tab |
| 124 | } |
| 125 | |
| 126 | // Auto-cycle tabs with progress bar |
| 127 | function autoCycleTabs() { |
| 128 | currentIndex = (currentIndex + 1) % tabBtns.length; |
| 129 | changeTab(currentIndex); |
| 130 | } |
| 131 | |
| 132 | // Pause autoplay on hover |
| 133 | tabBtns.on("mouseenter", function () { |
| 134 | clearInterval(autoplayInterval); |
| 135 | progressBars.stop(); // Stop the progress bar animation |
| 136 | }); |
| 137 | |
| 138 | // Resume autoplay on mouse leave |
| 139 | tabBtns.on("mouseleave", function () { |
| 140 | autoplayInterval = setInterval(autoCycleTabs, intervalDuration); |
| 141 | const activeIndex = tabBtns.index(tabBtns.filter(".active")); |
| 142 | startProgressBar(activeIndex); // Restart progress bar animation for the active tab |
| 143 | }); |
| 144 | |
| 145 | // Initialize autoplay |
| 146 | if (tabBtns.length > 0) { |
| 147 | changeTab(currentIndex); // Start with the first tab |
| 148 | autoplayInterval = setInterval(autoCycleTabs, intervalDuration); // Start autoplay |
| 149 | } |
| 150 | |
| 151 | // Optional: Pause autoplay when user interacts with the tab content (e.g., scroll) |
| 152 | $(".tab-content").on("mouseenter", function () { |
| 153 | clearInterval(autoplayInterval); |
| 154 | progressBars.stop(); |
| 155 | }).on("mouseleave", function () { |
| 156 | autoplayInterval = setInterval(autoCycleTabs, intervalDuration); |
| 157 | const activeIndex = tabBtns.index(tabBtns.filter(".active")); |
| 158 | startProgressBar(activeIndex); |
| 159 | }); |
| 160 | }); |
| 161 | })(jQuery); |
| 162 | </script> |
| 163 | <?php |
| 164 | } |
| 165 | ?> |