Automatic tab switching component with html css js

Automatic tab switching component with HTML CSS JS: Creating tabs and adding them to your website can be more attractive and help you increase conversion rate Here is the code for the auto-tab switching component. You can use these on any site.

Automatic tab switching component with html css js

you can add these code html site or wordpress or any it made with only html css js only

Automatic tab switching component with html css js

<script>

document.addEventListener('DOMContentLoaded', () => {
    let currentIndex = 0;
    const tabs = document.querySelectorAll('.customtab');
    const contents = document.querySelectorAll('.customcontent');
    const intervalTime = 5000; 
    function activateTab(index) {
        tabs.forEach((tab, idx) => {
            const progressBar = tab.querySelector('.customtab-progress');
            const isActive = idx === index;

            tab.classList.toggle('active', isActive);
            contents[idx].classList.toggle('active', isActive);
            
            if (isActive) {
                progressBar.style.transition = 'none'; // Reset transition
                progressBar.offsetWidth; // Trigger reflow
                progressBar.style.transition = `width ${intervalTime}ms linear`; // Apply transition
                progressBar.style.width = '100%'; // Start animation
            } else {
                progressBar.style.transition = 'none'; // No transition for inactive tabs
                progressBar.style.width = '0';
            }
        });
    }

    function cycleTabs() {
        currentIndex = (currentIndex + 1) % tabs.length;
        activateTab(currentIndex);
    }

    tabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            currentIndex = index;
            activateTab(currentIndex);
            clearInterval(interval);
            interval = setInterval(cycleTabs, intervalTime);
        });
    });

    let interval = setInterval(cycleTabs, intervalTime);
    activateTab(0);
});

</script>

HTML code :

    <section>
        
<div class="customtabs">
    <div class="customtab" data-tab="1">Gachibowli<div class="customtab-progress"></div></div>
    <div class="customtab" data-tab="2">Hightech City<div class="customtab-progress"></div></div>
    <div class="customtab" data-tab="3">Madhapur<div class="customtab-progress"></div></div>
</div>

<div class="customtab-content">
    <div class="customcontent" id="content-1">
        <img src="https://images.ctfassets.net/xny2w179f4ki/6zTBOigGSpsZ8AAyRSQj80/9ce049b1155ebd54df431eaa9616a3f1/product-reporting.webp?&q=90&w=1920">
    </div>
    <div class="customcontent" id="content-2">
        <img src="https://images.ctfassets.net/xny2w179f4ki/5gA6r1gzJzc2inZbeULhUK/00b5ae9f297a49b6d114037b25e946ea/product-workflows.webp?&q=90&w=2560">
    </div>
    <div class="customcontent" id="content-3">
        <img src="https://images.ctfassets.net/xny2w179f4ki/1tl4pH9Gp9ssh4g6OCiylK/8e907af3303357138bdaa2f89a012138/product-outbound.webp?&q=90&w=2560">
    </div>
</div>
</section>

Style css :

<style>
    .customtab {
        font-size: 18px;
        margin-bottom: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        z-index: 100;
        background: #f6f6f6;
        height: 50px !important;
        border-radius: 50px;
        border: none !important;
        padding: 20px !important;
        display: flex !important
;
        justify-content: center;
        align-items: center;
    }
.customtab-progress {
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    background: #000;
    width: 40px;
    height: 50px !important;
    border-radius: 50px !important;
    width: 0%;
    border-radius: 2px;
    z-index: -1;
    background-blend-mode: soft-light;
}
.customtabs {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.customtab {
    color:#212121;
    font-size: 22px;
        font-family: ct_font_founders, Sans-Serif;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    position: relative; 
    margin-bottom: 30px;
    border-bottom: 3px solid #ccc;
}

.customtab-progress {
    position: absolute;
    bottom: -2px; 
    left: 0;
    height: 2px;
    background: #ccc;
    width: 0%; 
    border-radius: 2px;
}


.customcontent {
    display: none;
    animation: fade-in 1s ease-out;
}

.customcontent.active {
    display: block;
    animation: fade-in;
}
@keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
.customtab-content {
    position: relative;
    min-height: 200px; 
}

.customcontent {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; 
    display: none; 
}

.customcontent.active {
    display: flex; 
    justify-self: center;
    opacity: 1; 
}

.customcontent img{
    width: 80%;
    height: auto;
   
}
.customcontent img {
    width: 80%;
    height: auto;
    border: 2px solid #ccc;
    border-radius: 26px;
    box-shadow: 0 .6021873017743928px 1.8065619053231785px -.8333333333333333px #ff009926, 0 2.288533303243457px 6.8655999097303715px -1.6666666666666665px #ff009926, 0 10px 30px -2.5px #ff009926, 0 .6021873017743928px 1.8065619053231785px -1px #ffcc0025, 0 2.288533303243457px 6.8655999097303715px -2px #ffcc0023, 0 10px 30px -3px #ffcc001a;
}
@media(max-width:768px){
    .customcontent img{
        border-radius: 14px;
    }
    .customcontent img{
        width: 100%;
    }
    .customcontent{
        width: 100%;
        height: 300px;
    }
    .customtab{
        font-size: 20px;
    }
        .customtabs {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto; 
        scroll-behavior: smooth; 
        gap: 16px; 
        padding-bottom: 10px; 
    }

    .customtabs::-webkit-scrollbar {
        display: none; 
    }
    .customtabs {
        -ms-overflow-style: none;
        scrollbar-width: none; 
    }

    .customtab {
        font-size: 18px; 
        margin-bottom: 20px; 
        flex-shrink: 0; 
        white-space: nowrap; 
    }
}
}
.customtab.active {
    color: white !important;
}
</style>