Jinsi ya Kutengeneza Interactive Tabs na Carousels

Interactive tabs na carousels hutumika kuonyesha content nyingi katika nafasi ndogo bila kurudia ukurasa. Zinaboresha UX na hurahisisha navigation.

✅ A. Kutengeneza Interactive Tabs
HTML
<div class="tabs">
<button class="tab-btn active" data-tab="tab1">HTML</button>
<button class="tab-btn" data-tab="tab2">CSS</button>
<button class="tab-btn" data-tab="tab3">JavaScript</button>
</div>

<div id="tab1" class="tab-content show">Hii ni Content ya HTML</div>
<div id="tab2" class="tab-content">Hii ni Content ya CSS</div>
<div id="tab3" class="tab-content">Hii ni Content ya JavaScript</div>

CSS
.tabs { display: flex; gap: 10px; margin-bottom: 10px; }
.tab-btn { padding: 8px 16px; border: none; background: #ddd; cursor: pointer; }
.tab-btn.active { background: #333; color: #fff; }
.tab-content { display: none; padding: 15px; border: 1px solid #ccc; }
.tab-content.show { display: block; }

JavaScript
const buttons = document.querySelectorAll(".tab-btn");
const contents = document.querySelectorAll(".tab-content");

buttons.forEach(btn => {
btn.addEventListener("click", () => {
buttons.forEach(b => b.classList.remove("active"));
contents.forEach(c => c.classList.remove("show"));

btn.classList.add("active");
document.getElementById(btn.dataset.tab).classList.add("show");
});
});

✅ B. Kutengeneza Simple Image Carousel
HTML
<div class="carousel">
<div class="slides">
<img src="img1.jpg" class="slide active">
<img src="img2.jpg" class="slide">
<img src="img3.jpg" class="slide">
</div>

<button class="prev">❮</button>
<button class="next">❯</button>
</div>

CSS
.carousel {
width: 100%;
max-width: 600px;
position: relative;
overflow: hidden;
}

.slides img {
width: 100%;
display: none;
}

.slide.active {
display: block;
}

.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 8px 12px;
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

JavaScript
let index = 0;
const slides = document.querySelectorAll(".slide");

document.querySelector(".next").onclick = () => changeSlide(1);
document.querySelector(".prev").onclick = () => changeSlide(-1);

function changeSlide(step) {
slides[index].classList.remove("active");
index = (index + step + slides.length) % slides.length;
slides[index].classList.add("active");
}


✔️ Code inafanya kazi moja kwa moja
✔️ Tabs + Carousel ni responsive na simple

🔗 Kwa Kujifunza Zaidi

🌐 Faulink – Namba 1 Tanzania kwa Web Design & Systems
https://www.faulink.com/