.ss-wrapper * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ss-wrapper {
--pink-dark: #9E1D64;
--pink-mid: #C24187;
--gold: #F1D368;
--white: #ffffff;
--card-w: 260px;
--card-h: 340px;
font-family: 'Poppins', sans-serif;
padding: 20px 20px;
/*background: linear-gradient(135deg, #1a0a12 0%, #2d0f20 50%, #1a0a12 100%);*/
border-radius: 20px;
position: relative;
overflow: hidden;
}
/* Background decoration */
.ss-wrapper::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(194,65,135,0.25) 0%, transparent 70%);
pointer-events: none;
}
.ss-wrapper::after {
content: '';
position: absolute;
bottom: -60px;
left: -60px;
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, rgba(158,29,100,0.2) 0%, transparent 70%);
pointer-events: none;
}
.ss-header {
text-align: center;
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.ss-header h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(22px, 4vw, 36px);
color: var(--white);
letter-spacing: 1px;
line-height: 1.2;
}
.ss-header h2 span {
color: var(--gold);
}
.ss-header p {
color: rgba(255,255,255,0.55);
font-size: 13px;
margin-top: 8px;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.ss-header-line {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 14px;
}
.ss-header-line::before,
.ss-header-line::after {
content: '';
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold));
}
.ss-header-line::after {
background: linear-gradient(90deg, var(--gold), transparent);
}
.ss-header-line span {
width: 8px;
height: 8px;
background: var(--gold);
border-radius: 50%;
display: block;
}
/* Slider Container */
.ss-slider-area {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 16px;
justify-content: center;
}
.ss-track-wrap {
overflow: hidden;
width: 100%;
max-width: 1200px;
border-radius: 16px;
}
.ss-track {
display: flex;
gap: 20px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
padding: 10px 4px;
}
/* Cards */
.ss-card {
flex: 0 0 var(--card-w);
height: var(--card-h);
border-radius: 18px;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.35s ease, box-shadow 0.35s ease;
background: #2a0e1c;
border: 1px solid rgba(194,65,135,0.2);
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.ss-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 50px rgba(158,29,100,0.45);
border-color: rgba(241,211,104,0.5);
}
.ss-card img {
width: 100%;
height: 72%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.ss-card:hover img {
transform: scale(1.07);
}
/* Card shimmer effect on top of image */
.ss-card-img-wrap {
position: relative;
height: 72%;
overflow: hidden;
background: linear-gradient(135deg, #3a1028, #5a1540);
}
.ss-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ss-card-img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(26,10,18,0.6) 100%);
pointer-events: none;
}
/* Placeholder avatar when no image */
.ss-avatar-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--pink-dark), var(--pink-mid));
font-size: 64px;
color: rgba(255,255,255,0.3);
font-family: 'Poppins', sans-serif;
font-weight: 700;
letter-spacing: -2px;
}
/* Card Info */
.ss-card-info {
padding: 14px 16px;
background: linear-gradient(135deg, #220d18, #2e1222);
height: 28%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.ss-card-info::before {
content: '';
position: absolute;
top: 0;
left: 16px;
right: 16px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ss-card-name {
font-family: 'Playfair Display', serif;
font-size: 16px;
color: var(--white);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ss-card-role {
font-size: 11px;
color: var(--gold);
margin-top: 3px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ss-card-badge {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, var(--pink-dark), var(--pink-mid));
color: var(--white);
font-size: 9px;
font-weight: 600;
padding: 3px 8px;
border-radius: 20px;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 2px 10px rgba(158,29,100,0.5);
z-index: 3;
}
/* Arrows */
.ss-arrow {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(194,65,135,0.5);
background: white;
backdrop-filter: blur(8px);
color: var(--black);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
z-index: 5;
outline: none;
}
.ss-arrow:hover {
background: var(--pink-mid);
border-color: var(--pink-mid);
box-shadow: 0 0 20px rgba(194,65,135,0.6);
transform: scale(1.1);
}
.ss-arrow:active {
transform: scale(0.95);
}
.ss-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}
.ss-arrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Dots */
.ss-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 28px;
position: relative;
z-index: 2;
}
.ss-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
cursor: pointer;
border: none;
outline: none;
transition: all 0.3s ease;
}
.ss-dot.active {
background: var(--gold);
width: 24px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(241,211,104,0.5);
}
/* Counter */
.ss-counter {
text-align: center;
margin-top: 16px;
font-size: 12px;
color: rgba(255,255,255,0.35);
letter-spacing: 2px;
font-weight: 300;
}
.ss-counter strong {
color: var(--gold);
font-weight: 600;
}
/* ── RESPONSIVE ── */
@media (max-width: 768px) {
.ss-wrapper {
--card-w: 200px;
--card-h: 280px;
padding: 40px 12px;
border-radius: 14px;
}
.ss-arrow {
width: 38px;
height: 38px;
}
.ss-arrow svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 480px) {
.ss-wrapper {
--card-w: 160px;
--card-h: 240px;
padding: 30px 8px;
}
.ss-track {
gap: 12px;
}
.ss-card-name {
font-size: 13px;
}
.ss-card-role {
font-size: 10px;
}
.ss-arrow {
width: 34px;
height: 34px;
}
}
Topper
Aarav Sharma
Science • Class 12
Merit
Priya Verma
Commerce • Class 12
Star
Rohit Singh
Arts • Class 11
Sneha Gupta
Science • Class 10
Gold
Karan Mehta
Maths • Class 12
Ananya Rao
Science • Class 11
Rank 1
Vikram Joshi
Commerce • Class 11
Meera Patel
Arts • Class 12
(function () {
const track = document.getElementById('ss-track');
const btnPrev = document.getElementById('ss-prev');
const btnNext = document.getElementById('ss-next');
const dotsWrap= document.getElementById('ss-dots');
const counter = document.getElementById('ss-counter');
const cards = Array.from(track.querySelectorAll('.ss-card'));
const total = cards.length;
let current = 0;
let visible = getVisible();
let autoTimer = null;
/* ── how many cards fit ── */
function getVisible() {
const w = window.innerWidth;
if (w <= 480) return 1;
if (w <= 640) return 2;
if (w <= 900) return 3;
return 3;
}
/* ── total slide positions ── */
function maxIndex() {
return Math.max(0, total - visible);
}
/* ── card pixel width including gap ── */
function cardWidth() {
if (!cards[0]) return 280;
const style = getComputedStyle(track);
const gap = parseFloat(style.gap) || 20;
return cards[0].getBoundingClientRect().width + gap;
}
/* ── move slider ── */
function goTo(idx) {
const max = maxIndex();
current = Math.max(0, Math.min(idx, max));
track.style.transform = `translateX(-${current * cardWidth()}px)`;
updateUI();
}
/* ── dots & counter ── */
function buildDots() {
dotsWrap.innerHTML = '';
const pages = maxIndex() + 1;
for (let i = 0; i { goTo(i); resetAuto(); });
dotsWrap.appendChild(d);
}
}
function updateUI() {
/* dots */
const dots = dotsWrap.querySelectorAll('.ss-dot');
dots.forEach((d, i) => d.classList.toggle('active', i === current));
/* arrows */
btnPrev.disabled = current === 0;
btnNext.disabled = current >= maxIndex();
/* counter */
counter.innerHTML = `
${current + 1} / ${maxIndex() + 1}`;
}
/* ── auto-play ── */
function startAuto() {
stopAuto();
autoTimer = setInterval(() => {
goTo(current >= maxIndex() ? 0 : current + 1);
}, 3500);
}
function stopAuto() { clearInterval(autoTimer); }
function resetAuto() { stopAuto(); startAuto(); }
/* ── arrow clicks ── */
btnPrev.addEventListener('click', () => { goTo(current - 1); resetAuto(); });
btnNext.addEventListener('click', () => { goTo(current + 1); resetAuto(); });
/* ── touch / swipe ── */
let touchX = 0;
track.addEventListener('touchstart', e => { touchX = e.touches[0].clientX; }, { passive: true });
track.addEventListener('touchend', e => {
const diff = touchX - e.changedTouches[0].clientX;
if (Math.abs(diff) > 40) {
goTo(diff > 0 ? current + 1 : current - 1);
resetAuto();
}
}, { passive: true });
/* ── pause on hover ── */
track.addEventListener('mouseenter', stopAuto);
track.addEventListener('mouseleave', startAuto);
/* ── resize ── */
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
visible = getVisible();
buildDots();
goTo(Math.min(current, maxIndex()));
}, 200);
});
/* ── INIT ── */
visible = getVisible();
buildDots();
goTo(0);
startAuto();
})();