<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Swiper Carousel with Circular Titles + Tabs + Progress Bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<style>
body {
font-family: "Manrope", Sans-serif;
padding: 30px;
background: #00000000;
}
.custom-home-slider .title-bar-wrapper {
width: 100%;
margin: 0 auto 30px;
position: relative;
height: 50px;
user-select: none;
}
.custom-home-slider .slide-titles {
position: relative;
height: 100%;
}
.custom-home-slider .slide-title-tab {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
font-size: 45px;
color: #999;
cursor: pointer;
opacity: 0.5;
pointer-events: auto;
transition: all 0.3s ease;
white-space: nowrap;
user-select: none;
line-height: 1.2;
}
.custom-home-slider .slide-title-tab.left {
left: 0;
transform: translateY(-50%) translateX(0);
opacity: 0.6;
color: #666;
}
.custom-home-slider .slide-title-tab.center {
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
pointer-events: none;
white-space: normal; /* allow line break */
text-align: center;
}
.custom-home-slider .slide-title-tab.right {
right: 0;
transform: translateY(-50%) translateX(0);
opacity: 0.6;
color: #666;
}
.custom-home-slider .slide-title-tab.hidden {
opacity: 0;
pointer-events: none;
}
/* Swiper container */
.custom-home-slider .swiper {
width: 100%;
height: 520px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.custom-home-slider .swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
/* Tabs inside each slide */
.custom-home-slider .tabs {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 12px;
user-select: none;
}
.custom-home-slider .tab {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 12px;
color: #fff;
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background: unset;
border-radius: 54px;
text-transform: uppercase;
font-size: 18px;
}
.custom-home-slider .design .tab {
border: 1px solid #E36F30;
}
.custom-home-slider .design .tab.active {
background: linear-gradient(90deg, #E36F30 0%, #FBC32A 100%);
}
.custom-home-slider .design .tab:hover {
background: linear-gradient(90deg, #E36F30 0%, #FBC32A 100%);
}
.custom-home-slider .inno .tab {
border: 1px solid #d82afb;
}
.custom-home-slider .inno .tab:hover {
background: linear-gradient(90deg, #30BDE5 0%, #d82afb 100%);
}
.custom-home-slider .inno .tab.active {
background: linear-gradient(90deg, #30BDE5 0%, #d82afb 100%);
}
.custom-home-slider .marketing .tab {
border: 1px solid #2AFBED;
}
.custom-home-slider .marketing .tab:hover {
background: linear-gradient(90deg, #30E381 0%, #2AFBED 100%);
}
.custom-home-slider .marketing .tab.active {
background: linear-gradient(90deg, #30E381 0%, #2AFBED 100%);
}
.custom-home-slider .tab-content {
border-radius: 30px;
padding: 14px;
background: #3A3A3A;
height: 420px;
box-sizing: border-box;
display: flex;
}
/* Arrows */
.custom-home-slider .swiper-button-prev, .custom-home-slider .swiper-button-next {
color: #fff;
top: 50%;
}
.custom-home-slider .swiper-slide-active {
opacity: 1;
pointer-events: auto;
}
.custom-home-slider .swiper-button-prev {
left: 35%;
}
.custom-home-slider .swiper-button-next {
right: 35%;
}
/* Progress bar container */
.custom-home-slider .progress-container {
width: 100%;
height: 5px;
background: #D9D9D9;
border-radius: 3px;
margin: 50px auto 0;
overflow: hidden;
}
/* Progress bar fill */
.custom-home-slider .progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(to right, #00c6ff, #9c27b0);
transition: width 0.4s ease;
}
.custom-home-slider .two-column {
display: flex;
gap: 20px;
align-items: center;
}
.custom-home-slider .left-column img {
width: 90%;
height: auto;
object-fit: cover;
}
.custom-home-slider .right-column {
flex: 1 1 70%;
text-align: left;
display: flex;
flex-direction: column;
}
.custom-home-slider .icon {
margin-top: 12px;
width: 32px;
height: 32px;
}
.custom-home-slider .left-column {
flex: 1 1 20%;
text-align: center;
}
.custom-home-slider h2.grad-title {
font-weight: 800;
font-size: 50px;
margin: 0 0 10px 0;
background: linear-gradient(90deg, #FFFFFF, #767585);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.custom-home-slider p {
margin-top:0;
font-size: 16px;
line-height: 1.5;
color: #A9A9A9;
font-weight: 300;
width: 55%;
}
.custom-home-slider .slide-title-tab.inn-title.center {
background: linear-gradient(90deg, #00c6ff, #9c27b0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.custom-home-slider .slide-title-tab.marketing-title.center {
background: linear-gradient(90deg, #30E381, #2AFBED);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.custom-home-slider .slide-title-tab.design-title.center {
background: linear-gradient(90deg, #E36F30, #FBC32A);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.custom-home-slider .right-column a img:hover {
transform: rotate(45deg) scale(0.8);
transition: transform 0.5s ease;
}
.custom-home-slider .right-column a img {
transition: .3s ease all;
}
.custom-home-slider .swiper-button-prev:after, .custom-home-slider .swiper-button-next:after{
display:none;
}
.custom-home-slider .swiper-button-next img {
width: 25px;
}
.custom-home-slider .swiper-button-next {
border: none;
z-index: 1;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 100px;
background-color: #ffffff1a;
}
.custom-home-slider .swiper-button-prev img {
width: 25px;
}
.custom-home-slider .swiper-button-prev {
border: none;
z-index: 1;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 100px;
background-color: #ffffff1a;
}
.custom-home-slider .swiper-button-next:hover, .swiper-button-prev:hover{
background-color: #444;
}
.custom-home-slider .right-column a {
width: fit-content;
}
.custom-home-slider .slide-title-tab.center:before {
content: "DIGITAL";
display: block !important;
}
/* MEDAI QUERY */
@media screen and (max-width: 1600px) {
.custom-home-slider .left-column img {
width: 100%;
}
}
@media screen and (max-width: 1440px) {
.custom-home-slider p {
width: 65%;
}
.custom-home-slider .swiper-button-next {
right: 30%;
}
.custom-home-slider .swiper-button-prev {
left: 30%;
}
.custom-home-slider .right-column a img {
width: 50px;
}
.custom-home-slider .tab-content
{
height: 370px;
}
}
@media screen and (max-width: 1366px) {
.custom-home-slider h2.grad-title {
font-size: 40px;
}
}
@media screen and (max-width: 1280px) {
.custom-home-slider .slide-title-tab {
font-size: 40px;
}
}
@media screen and (max-width: 1024px) {
.custom-home-slider .slide-title-tab {
font-size: 35px;
}
.custom-home-slider .tab {
font-size: 14px;
}
.custom-home-slider p {
width: 95%;
}
.custom-home-slider h2.grad-title {
font-size: 35px;
}
.custom-home-slider .tabs {gap: 10px;}
.custom-home-slider .tab {
padding: 8px 5px;
}
.custom-home-slider .tab-content {
height: 340px;
margin-top: 10px;
}
.custom-home-slider .right-column a img {
width: 40px;
}
}
@media screen and (max-width: 820px) {
.custom-home-slider .slide-title-tab {
font-size: 30px;
}
.custom-home-slider .swiper-button-next, .custom-home-slider .swiper-button-prev {
width: 40px;
height: 40px;
}
.custom-home-slider .progress-container {
margin: 30px auto 0;
}
.custom-home-slider .tab {
font-size: 12px;
padding: 8px 7px;
}
.custom-home-slider h2.grad-title {
font-size: 30px;
}
}
@media screen and (max-width: 768px) {
.custom-home-slider .slide-title-tab {
font-size: 25px;
}
.custom-home-slider .tab {
font-size: 12px;
padding: 8px 4px;
}
}
@media screen and (max-width: 767px) {
.custom-home-slider .slide-title-tab.left, .custom-home-slider .slide-title-tab.right {
display: none;
}
.custom-home-slider .swiper-button-next {
right: 0;
}
.custom-home-slider .swiper-button-prev {
left: 0;
}
html, body{
padding: 0;
}
.custom-home-slider .two-column {
display: flex;
flex-direction: column;
height: auto;
gap: 0px;
}
.custom-home-slider .tab-content {
height: auto;
}
.custom-home-slider .swiper-slide {
height: auto;
}
.custom-home-slider .swiper.swiper-initialized.swiper-horizontal.swiper-ios.swiper-backface-hidden {
height: auto;
}
.custom-home-slider .swiper-wrapper {
height: auto;
}
.custom-home-slider .tabs {
display: flex;
flex-direction: column;
gap:5px;
}
.custom-home-slider .tab {
font-size: 14px;
padding: 12px 24px;
}
}
</style>
</head>
<body>
<div class="custom-home-slider">
<div class="title-bar-wrapper">
<div class="swiper-button-prev">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/left-arrow.png">
</div>
<div class="swiper-button-next">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/right-arrow.png">
</div>
<div class="slide-titles">
<div class="slide-title-tab inn-title" data-slide="0">INNOVATION</div>
<div class="slide-title-tab design-title" data-slide="1">DESIGN</div>
<div class="slide-title-tab marketing-title" data-slide="2">MARKETING</div>
</div>
</div>
<!-- Progress bar container -->
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<!-- Slide 1 INNOVATION -->
<div class="swiper-slide">
<div class="tabs-wrapper">
<div class="tabs inno">
<div class="tab active" data-tab="1">Mobile App</div>
<div class="tab" data-tab="2">Game App</div>
<div class="tab" data-tab="3">Web App</div>
<div class="tab" data-tab="4">MVP Startup</div>
<div class="tab" data-tab="5">AR</div>
<div class="tab" data-tab="6">VR</div>
<div class="tab" data-tab="7">E-Commerce</div>
<div class="tab" data-tab="8">Startup</div>
</div>
</div>
<div class="tab-content" data-content="1">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/mobile-group-1.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">MOBILE APP DEVELOPMENT</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="2" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/img-2.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">GAME APP DEVELOPMENT</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="3" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/img-3.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">WEB APPLICATION</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="4" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/img-4.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">MVP STARTUP DEVELOPMENT</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="5" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/mobile-group-1.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">AR DEVELOPMENT</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="6" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/img-6.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">VR DEVELOPMENT</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="7" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/img-7.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">ECOMMERCE WEBSITE</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="8" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/img-8.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">STARTUP DEVELOPMENT</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
</div>
<!-- Slide 2 DESIGN -->
<div class="swiper-slide">
<div class="tabs design">
<div class="tab active" data-tab="1">WEB DESIGN</div>
<div class="tab" data-tab="2">LOGO DESIGN</div>
<div class="tab" data-tab="3">2D-3D Illustration</div>
<div class="tab" data-tab="4">MOTION GRAPHICS</div>
</div>
<div class="tab-content" data-content="1">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/mobile-group-1.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">WEB DESIGN</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="2" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/mobile-group-1.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">LOGO DESIGN</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="3" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/mobile-group-1.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">2D-3D ILLUSTRATION</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="4" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/mobile-group-1.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">MOTION GRAPHICS</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
</div>
<!-- Slide 3 MARKETING -->
<div class="swiper-slide">
<div class="tabs marketing">
<div class="tab active" data-tab="1">SOCIAL MEDIA</div>
<div class="tab" data-tab="2">SEO</div>
</div>
<div class="tab-content" data-content="1">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/mobile-group-1.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">SOCIAL MEDIA MARKETING</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
<div class="tab-content" data-content="2" style="display:none;">
<div class="two-column">
<div class="left-column">
<img src="https://dev.icreativesol.com/wp-content/uploads/2025/04/mobile-group-1.webp" alt="Sample Image" />
</div>
<div class="right-column">
<h2 class="grad-title">SEARCH ENGINE OPTIMIZATION</h2>
<p>The upsurge of the mobile game app industry is generating high revenues by capturing a large-scale market of game players. Building a game app that provides financial aid requires high-profile game app developers who help you discover unwavering strategies for game design and development that not only exist for entertainment but also generate hefty revenues for investors.</p>
<a href="https://www.your-link.com" target="_blank">
<img class="anim-arrow-icon" src="https://dev.icreativesol.com/wp-content/uploads/2025/04/white-btn.svg" alt="Mobile App Development" style="max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px;">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
// Initialize Swiper
const swiper = new Swiper(".custom-home-slider .swiper", {
speed: 600,
slidesPerView: 1,
spaceBetween: 30,
navigation: {
nextEl: ".custom-home-slider .swiper-button-next",
prevEl: ".custom-home-slider .swiper-button-prev",
},
on: {
slideChange: () => {
updateTitleTabs(swiper.activeIndex);
updateProgressBar(swiper.activeIndex);
resetInnerTabs(swiper.activeIndex);
},
},
});
// Elements references
const titleTabs = document.querySelectorAll(".custom-home-slider .slide-title-tab");
const progressBar = document.querySelector(".custom-home-slider .progress-bar");
const swiperSlides = document.querySelectorAll(".custom-home-slider .swiper-slide");
// Update big slide title tabs (left, center, right, hidden)
function updateTitleTabs(activeIndex) {
const total = titleTabs.length;
titleTabs.forEach((tab, idx) => {
tab.classList.remove("left", "center", "right", "hidden");
if (idx === activeIndex) {
tab.classList.add("center");
} else if (
(activeIndex === 0 && idx === 1) || // Innovation center => Design left
(activeIndex === 1 && idx === 0) || // Design center => Innovation left
(activeIndex === 2 && idx === 1) // Marketing center => Design left
) {
tab.classList.add("left");
} else if (
(activeIndex === 0 && idx === 2) || // Innovation center => Marketing right
(activeIndex === 1 && idx === 2) || // Design center => Marketing right
(activeIndex === 2 && idx === 0) // Marketing center => Innovation right
) {
tab.classList.add("right");
} else {
tab.classList.add("hidden");
}
});
}
// Initially call it
updateTitleTabs(swiper.activeIndex);
// Clicking big slide title tabs moves swiper slide
titleTabs.forEach((tab, index) => {
tab.addEventListener("click", () => {
swiper.slideTo(index);
});
});
// Update progress bar width according to slide index
function updateProgressBar(activeIndex) {
const totalSlides = swiperSlides.length;
const progressPercent = ((activeIndex + 1) / totalSlides) * 100;
progressBar.style.width = progressPercent + "%";
}
// Initial progress bar
updateProgressBar(swiper.activeIndex);
// Handle inner tabs switching inside each slide
swiperSlides.forEach((slide) => {
const tabs = slide.querySelectorAll(".tab");
const contents = slide.querySelectorAll(".tab-content");
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
// Remove active from all tabs in this slide
tabs.forEach((t) => t.classList.remove("active"));
// Hide all content in this slide
contents.forEach((content) => (content.style.display = "none"));
// Activate clicked tab
tab.classList.add("active");
// Show related content
const dataTab = tab.getAttribute("data-tab");
const contentToShow = slide.querySelector(`.tab-content[data-content="${dataTab}"]`);
if (contentToShow) contentToShow.style.display = "flex";
});
});
});
// When slide changes, reset inner tabs to first tab active + content visible
function resetInnerTabs(activeIndex) {
swiperSlides.forEach((slide, idx) => {
const tabs = slide.querySelectorAll(".tab");
const contents = slide.querySelectorAll(".tab-content");
if (idx === activeIndex) {
// Show first tab and content in active slide
tabs.forEach((tab, i) => {
tab.classList.toggle("active", i === 0);
});
contents.forEach((content, i) => {
content.style.display = i === 0 ? "flex" : "none";
});
} else {
// Hide all contents in inactive slides
contents.forEach((content) => (content.style.display = "none"));
tabs.forEach((tab) => tab.classList.remove("active"));
}
});
}
// Reset inner tabs on load
resetInnerTabs(swiper.activeIndex);
</script>
</body>
</html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter