Custom Tab-based Navigation
This article is now outdated!
A better way to accomplish this now with version 5.0+ is to use Static Layers and Layer Links. Or you can modify customize your slider’s navigation using the techniques shown here and here.
Normally, the slider comes with the options of having thumbnails or bullets for the slider’s navigation. If you want to add tabs, one option is to add the tabs as individual layers to each slide, and then hyperlink the layers to their corresponding slide. A second option is to add the tabs with some custom CSS and JavaScript, which would allow for the tabs to be “static” (not animate in and out with each slide change). Here’s an example:
The JavaScript part can be added to your theme’s “footer.php” file, directly above the closing “</body>” tag. There are two main parts of the script that need to be customized. The first is the “tabText” values shown at the top of the script, and the second is the “revapi12” part, shown toward the bottom. Check out the comments in the script for information about adjusting the “revapi12” part.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<script type="text/javascript"> jQuery(document).ready(function() { var slider = jQuery('.rev_slider_wrapper'); if(!slider.length) return; // text to be used for the tabs, edit as needed var tabText = [ 'Slide Number One', 'Slide Number Two', 'Slide Number Three', 'Slide Number Four' ]; var tabContainer = jQuery('<div class="my-slider-tabs" />').appendTo(slider), slides = slider.find('li'), len = slides.length, wid = Math.max(100 / len) + '%', tabs = []; slides.each(function(i) { var span = tabs[i] = jQuery('<span />').css('width', wid).text(tabText[i]).on('click', tabClick).appendTo(tabContainer); if(i === 0) span.addClass('tab-active'); }); function tabClick() { for(var i = 0; i < len; i++) { var tab = tabs[i]; if(tab[0] !== this) { tab.removeClass('tab-active'); } else { tab.addClass('tab-active'); // edit the "revapi12" part to match your slider's individual "API" variable // information about how to get your slider's "API variable" can be found here: // https://www.themepunch.com/home/plugins/wordpress-plugins/revolution-slider-wordpress/api-tutorial/ revapi12.revshowslide(i + 1); } } } }); </script> |
The final part is the CSS, which will style our new tabs. Add the CSS to the bottom of your theme’s “style.css” file, or if your theme has a “Custom CSS” option, add it there instead.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/* tabs container */ .my-slider-tabs { position: absolute; width: 100%; bottom: 0; left: 0; z-index: 9999; overflow-x: hidden; } /* individual tabs */ .my-slider-tabs span { position: relative; display: inline-block; text-align: center; cursor: pointer; font: 14px Arial, Helvetica, sans-serif; color: #FFF; /* top and bottom spacing for tab text */ padding: 15px 0 15px 0; background-color: #000; /* IE8 fallback */ background-color: rgba(0, 0, 0, 0.5); -webkit-transition: background-color 0.4s ease-out; -moz-transition: background-color 0.4s ease-out; -o-transition: background-color 0.4s ease-out; transition: background-color 0.4s ease-out; } /* active tab styles */ .my-slider-tabs span.tab-active { /* normal cursor for active tab */ cursor: auto; /* colored line for active tab */ border-top: 5px solid #FFF; } /* tab background, active state and mouse over */ .my-slider-tabs span.tab-active, .my-slider-tabs span:hover { background-color: rgba(0, 0, 0, 0.75); } /* tab font size on landscape mobile */ @media screen and (max-width: 640px) { .my-slider-tabs span {font-size: 10px;} } /* tab font size on portrait mobile */ @media screen and (max-width: 360px) { .my-slider-tabs span {font-size: 8px;} } |