State
5 posts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Big Breaking Carousel</title>
<!-- Optional: Roboto Condensed from Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
<style>
/* === BIG BREAKING CUSTOM CAROUSEL === */
body {
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
background: #f5f5f5;
}
.ta-bigbreaking-carousel {
max-width: 1200px;
margin: 40px auto;
padding: 0 16px;
font-family: 'Roboto Condensed', sans-serif;
}
/* Heading style */
.ta-carousel-header h2 {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #e11b22;
margin: 0 0 16px;
position: relative;
display: inline-block;
}
.ta-carousel-header h2::before,
.ta-carousel-header h2::after {
content: "";
position: absolute;
top: 50%;
width: 60px;
height: 2px;
background: #000;
transform: translateY(-50%);
}
.ta-carousel-header h2::before {
left: -80px;
}
.ta-carousel-header h2::after {
right: -80px;
}
/* Viewport */
.ta-carousel-viewport {
overflow: hidden;
border-radius: 6px;
}
/* Track */
.ta-carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
}
/* Each slide: 1 at a time */
.ta-slide {
flex: 0 0 100%;
display: flex;
flex-direction: column;
background: #000;
color: #fff;
}
/* Banner height (change for smaller/larger) */
.ta-slide-image img {
width: 100%;
height: 340px; /* make 320/300 if you want it shorter */
object-fit: cover;
display: block;
}
.ta-slide-content {
padding: 16px 20px 20px;
background: #000;
}
.ta-slide-category {
display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
background: #e11b22;
padding: 3px 8px;
margin-bottom: 8px;
border-radius: 2px;
}
.ta-slide-title {
font-size: 20px;
line-height: 1.3;
margin: 4px 0 6px;
}
.ta-slide-title a {
color: #fff;
text-decoration: none;
}
.ta-slide-title a:hover {
text-decoration: underline;
}
.ta-slide-meta {
font-size: 13px;
color: #ccc;
}
/* Controls */
.ta-carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 10px;
}
.ta-prev,
.ta-next {
border: none;
background: #111;
color: #fff;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.ta-prev:hover,
.ta-next:hover {
background: #e11b22;
}
/* Dots */
.ta-dots {
display: flex;
gap: 6px;
}
.ta-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: #ccc;
cursor: pointer;
}
.ta-dot.is-active {
background: #e11b22;
}
/* Responsive */
@media (max-width: 768px) {
.ta-slide-image img {
height: 260px;
}
.ta-slide-title {
font-size: 18px;
}
}
</style>
</head>
<body>
<!-- ===== BIG BREAKING CAROUSEL ===== -->
<section class="ta-bigbreaking-carousel" aria-label="Big Breaking">
<div class="ta-carousel-header">
<h2>BIG BREAKING</h2>
</div>
<div class="ta-carousel-viewport">
<div class="ta-carousel-track">
<!-- SLIDE 1 -->
<article class="ta-slide is-active">
<a href="#" class="ta-slide-image">
<img src="https://picsum.photos/1200/700?random=1" alt="Headline 1">
</a>
<div class="ta-slide-content">
<span class="ta-slide-category">BIG BREAKING</span>
<h3 class="ta-slide-title">
<a href="#">
ED conducts raids across 10 states in medical college bribery case
</a>
</h3>
<div class="ta-slide-meta">November 27, 2025 • New Delhi</div>
</div>
</article>
<!-- SLIDE 2 -->
<article class="ta-slide">
<a href="#" class="ta-slide-image">
<img src="https://picsum.photos/1200/700?random=2" alt="Headline 2">
</a>
<div class="ta-slide-content">
<span class="ta-slide-category">BIG BREAKING</span>
<h3 class="ta-slide-title">
<a href="#">
India vs Bangladesh: Rishabh Pant equals MS Dhoni’s record
</a>
</h3>
<div class="ta-slide-meta">November 28, 2025 • Sports Desk</div>
</div>
</article>
<!-- SLIDE 3 -->
<article class="ta-slide">
<a href="#" class="ta-slide-image">
<img src="https://picsum.photos/1200/700?random=3" alt="Headline 3">
</a>
<div class="ta-slide-content">
<span class="ta-slide-category">BIG BREAKING</span>
<h3 class="ta-slide-title">
<a href="#">
Justice V Srishananda of Karnataka HC expresses regret for remarks
</a>
</h3>
<div class="ta-slide-meta">November 27, 2025 • Bengaluru</div>
</div>
</article>
<!-- Add more <article class="ta-slide"> ... </article> for more news -->
</div>
</div>
<div class="ta-carousel-controls">
<button class="ta-prev" type="button" aria-label="Previous">❮</button>
<div class="ta-dots"></div>
<button class="ta-next" type="button" aria-label="Next">❯</button>
</div>
</section>
<script>
// Simple vanilla JS slider: 1 slide at a time, auto every 2s
document.addEventListener('DOMContentLoaded', function () {
const root = document.querySelector('.ta-bigbreaking-carousel');
if (!root) return;
const track = root.querySelector('.ta-carousel-track');
const slides = Array.from(root.querySelectorAll('.ta-slide'));
const prevBtn = root.querySelector('.ta-prev');
const nextBtn = root.querySelector('.ta-next');
const dotsContainer = root.querySelector('.ta-dots');
let index = 0;
let timer;
const slideCount = slides.length;
if (!slideCount) return;
// Create dots
slides.forEach(function (slide, i) {
const dot = document.createElement('button');
dot.className = 'ta-dot' + (i === 0 ? ' is-active' : '');
dot.type = 'button';
dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
dot.addEventListener('click', function () {
goToSlide(i, true);
});
dotsContainer.appendChild(dot);
});
const dots = Array.from(root.querySelectorAll('.ta-dot'));
function goToSlide(i, stopAuto) {
index = (i + slideCount) % slideCount;
const offset = -index * 100;
track.style.transform = 'translateX(' + offset + '%)';
slides.forEach(function (s, j) {
s.classList.toggle('is-active', j === index);
});
dots.forEach(function (d, j) {
d.classList.toggle('is-active', j === index);
});
if (stopAuto) restartAuto();
}
function next() {
goToSlide(index + 1);
}
function prev() {
goToSlide(index - 1, true);
}
function startAuto() {
timer = setInterval(next, 2000); // 2 seconds
}
function stopAuto() {
clearInterval(timer);
}
function restartAuto() {
stopAuto();
startAuto();
}
if (nextBtn) nextBtn.addEventListener('click', function () {
goToSlide(index + 1, true);
});
if (prevBtn) prevBtn.addEventListener('click', function () {
goToSlide(index - 1, true);
});
root.addEventListener('mouseenter', stopAuto);
root.addEventListener('mouseleave', startAuto);
// init
track.style.transform = 'translateX(0%)';
startAuto();
});
</script>
</body>
</html>