"සම්භාව්ය දත්ත ස්ලයිඩරය" (Common Data Carousel)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leadership Team</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(180deg, #1a0b3b, #2a1a5e);
color: #e6e6fa;
}
.leadership-section {
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.leadership-section h2 {
font-family: 'Orbitron', sans-serif;
font-size: 2rem;
color: #e6e6fa;
margin-bottom: 10px;
}
.leadership-section p.subtitle {
font-size: 1rem;
color: #d8bfd8;
max-width: 600px;
margin-bottom: 40px;
}
.carousel-container {
width: 100%;
max-width: 100%;
overflow: hidden;
margin: 40px 0;
position: relative;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.profile-card {
min-width: 140px;
max-width: 180px;
width: 90vw;
margin: 0 10px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.3s, box-shadow 0.3s;
flex: 0 0 auto;
}
.profile-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.profile-card i {
font-size: 2rem;
color: #00f7ff;
margin-bottom: 10px;
transition: transform 0.3s;
}
.profile-card:hover i {
transform: scale(1.2);
}
.profile-card h3 {
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
color: #e6e6fa;
margin-bottom: 5px;
}
.profile-card p.title {
font-size: 0.9rem;
color: #d8bfd8;
margin-bottom: 6px;
}
.profile-card p.description {
font-size: 0.8rem;
color: #e6e6fa;
}
.navigation {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.nav-button {
background: transparent;
border: none;
font-size: 2rem;
color: #00f7ff;
cursor: pointer;
margin: 0 10px;
transition: color 0.3s;
}
.nav-button:hover {
color: #ff69b4;
}
.action-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.action-button {
padding: 10px 20px;
border-radius: 50px;
font-size: 1rem;
cursor: pointer;
transition: transform 0.3s;
text-decoration: none;
}
.action-button.primary {
background: linear-gradient(90deg, #ff69b4, #00f7ff);
color: #1a0b3b;
border: none;
}
.action-button.secondary {
background: transparent;
border: 2px solid #ff69b4;
color: #e6e6fa;
}
.action-button:hover {
transform: scale(1.05);
}
@media (max-width: 768px) {
.carousel-container {
max-width: 100vw;
margin: 40px auto;
}
.profile-card {
width: 90vw;
max-width: 180px;
margin: 0 10px;
}
.carousel-track {
display: flex;
justify-content: flex-start;
}
}
</style>
<!-- Carousel Container -->
<div class="carousel-container">
<div class="carousel-track">
<!-- Item 01 -->
<div class="profile-card">
<i class="fas fa-user-tie"></i>
<h3>Item 01 Topic</h3>
<p class="title">Item 01 Sub Topic</p>
<p class="description">Item 01 Details</p>
</div>
<!-- Item 02 -->
<div class="profile-card">
<i class="fas fa-user-tie"></i>
<h3>Item 02 Topic</h3>
<p class="title">Item 02 Sub Topic</p>
<p class="description">Item 02 Details</p>
</div>
<!-- Item 03 -->
<div class="profile-card">
<i class="fas fa-user-tie"></i>
<h3>Item 03 Topic</h3>
<p class="title">Item 03 Sub Topic</p>
<p class="description">Item 03 Details</p>
</div>
<!-- Item 04 -->
<div class="profile-card">
<i class="fas fa-user-tie"></i>
<h3>Item 04 Topic</h3>
<p class="title">Item 04 Sub Topic</p>
<p class="description">Item 04 Details</p>
</div>
<!-- Item 05 -->
<div class="profile-card">
<i class="fas fa-user-tie"></i>
<h3>Item 05 Topic</h3>
<p class="title">Item 05 Sub Topic</p>
<p class="description">Item 05 Details</p>
</div>
<!-- Item 06 -->
<div class="profile-card">
<i class="fas fa-user-tie"></i>
<h3>Item 06 Topic</h3>
<p class="title">Item 06 Sub Topic</p>
<p class="description">Item 06 Details</p>
</div>
<!-- Item 07 -->
<div class="profile-card">
<i class="fas fa-user-tie"></i>
<h3>Item 07 Topic</h3>
<p class="title">Item 07 Sub Topic</p>
<p class="description">Item 07 Details</p>
</div>
</div>
</div>
<!-- Navigation Buttons -->
<div class="navigation">
<button class="nav-button" onclick="moveCarousel(-1)">‹</button>
<button class="nav-button" onclick="moveCarousel(1)">›</button>
</div>
<!-- Action Buttons -->
<div class="action-buttons">
<a href="#" class="action-button primary">Button 01</a>
<a href="#" class="action-button secondary">Button 02</a>
</div>
</section>
<script>
let currentIndex = 0;
const track = document.querySelector('.carousel-track');
const cards = document.querySelectorAll('.profile-card');
const cardWidth = 160; // 140px card + 10px left margin + 10px right margin
function moveCarousel(direction) {
const totalCards = cards.length;
currentIndex += direction;
if (currentIndex < 0) {
currentIndex = 0;
return;
}
if (currentIndex >= totalCards - getVisibleCards()) {
currentIndex = totalCards - getVisibleCards();
return;
}
track.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
}
function getVisibleCards() {
if (window.innerWidth <= 768) {
return 1; // One card visible on mobile
}
return Math.floor(window.innerWidth / cardWidth); // Approximate number of visible cards
}
window.addEventListener('resize', () => {
currentIndex = 0;
track.style.transform = `translateX(0)`;
});
</script>