Home - THE ALERT INDIA

Thick Fog and Biting Cold Cripple Delhi-NCR: Flights and Trains Delayed, GRAP-III Reimposed

January 17, 2026January 17, 2026

The Fragility of a Quiet Bench- Editorial: By Neeraj Gaur

January 14, 2026January 14, 2026

The Growing Pains of a Transit Hub: Is Zirakpur the New “Crime Capital” of Tricity?-Neeraj Gaur

January 11, 2026January 11, 2026

COMING SOON

January 4, 2026January 4, 2026

The Great Reset of India’s Gaming Industry (2026) Special Report: By Pratyush Gaur

January 3, 2026January 4, 2026

Caracas Hit by Explosions; Venezuela Levels Accusations at U.S

January 3, 2026January 3, 2026

Pakistan Acknowledges Damage to Nur Khan Airbase After Operation Sindoor

December 30, 2025December 30, 2025

Big Breaking Metropolitan Cities

Thick Fog and Biting Cold Cripple Delhi-NCR: Flights and Trains Delayed, GRAP-III Reimposed

January 17, 2026January 17, 2026

Neeraj Gaur

Big Breaking Editorial

The Fragility of a Quiet Bench- Editorial: By Neeraj Gaur

January 14, 2026January 14, 2026

Neeraj Gaur

Big Breaking National

The Growing Pains of a Transit Hub: Is Zirakpur the New “Crime Capital” of Tricity?-Neeraj Gaur

January 11, 2026January 11, 2026

Neeraj Gaur

The Alert TV

COMING SOON

January 4, 2026January 4, 2026

Neeraj Gaur

Big Breaking Entertainment

The Great Reset of India’s Gaming Industry (2026) Special Report: By Pratyush Gaur

January 3, 2026January 4, 2026

Neeraj Gaur

Big Breaking Editorial

Caracas Hit by Explosions; Venezuela Levels Accusations at U.S

January 3, 2026January 3, 2026

Editorial

Big Breaking National

Pakistan Acknowledges Damage to Nur Khan Airbase After Operation Sindoor

December 30, 2025December 30, 2025

Neeraj Gaur

Big Breaking Economy

RBI Fines Kotak Mahindra Bank ₹61.95 Lakh for Regulatory Lapses

December 22, 2025January 4, 2026

Neeraj Gaur

Big Breaking Economy

India and New Zealand Conclude Landmark Free Trade Agreement, Opening New Chapter in Indo-Pacific Economic Ties

December 22, 2025December 22, 2025

Neeraj Gaur

Big Breaking Economy

Saudi Arabia’s Economic Transformation Faces Key Test Amid Lower Oil Prices: IMF

December 21, 2025December 21, 2025

Neeraj Gaur

<!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">&#10094;</button>
      <div class="ta-dots"></div>
      <button class="ta-next" type="button" aria-label="Next">&#10095;</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>