Author: | aakashgill |
---|---|
Views Total: | 784 views |
Official Page: | Go to website |
Last Update: | November 18, 2022 |
License: | MIT |
Preview:

Description:
Auto-tabs.js is a tiny tabs JavaScript plugin that has the ability to automatically switch between tabs at a given speed.
How to use it:
1. The required HTML structure for the tabs UI.
<div id="tabs"> <div class="tabs-container"> <button data-tab="tab1" class="tabs active-tab"> Tab 1 </button> <button data-tab="tab2" class="tabs"> Tab 2 </button> <button data-tab="tab3" class="tabs"> Tab 3 </button> </div> <div class="tabs-content-container"> <div class="tab-content active-tab" data-tab-content="tab1"> Tab 1 data </div> <div class="tab-content" data-tab-content="tab2"> Tab 2 data </div> <div class="tab-content" data-tab-content="tab3"> Tab 3 data </div> </div> </div>
2. Load the Auto-tabs.js in the document.
<script src="./auto-tabs.js"></script>
3. Initialize the tabs plugin.
new Tabs({ el: '#tabs', });
4. The example CSS styles.
.tabs-content-container .tab-content { display: none; } .tabs-content-container .tab-content.active-tab { display: block; } /* Basic tabs styling */ #tabs, #tabs2, #tabs3 { max-width: 600px; margin: 50px; margin-top: 0; border: 1px solid #d9dee1; } .tabs-container { display: flex; } .tabs { flex-grow: 1; text-align: left; padding: 10px; background: #eee; cursor: pointer; border: none; border-radius: 3px; } .tabs-content-container { padding: 10px; } .tabs-container .tabs.active-tab { background-color: #fff; font-weight: 600; }
5. Display a slim loading bar in the tabs.
new Tabs({ el: '#tabs', loading: true, loadingColor: '#f94c4c', });
/* loading bar */ .tabs--loader { width: 100%; height: 1px; background-color: black; position: absolute; bottom: 0; left: 0; transform: scaleX(0); transform-origin: left; } @keyframes line-loader { to { transform: scaleX(1); } } .tabs-container .tabs.active-tab .tabs--loader { animation-name: line-loader; animation-timing-function: linear; }
6. Set the time to wait before jumping to the next tab. Default: 2000.
new Tabs({ el: '#tabs', timer: 4000, });