Home - THE ALERT INDIA

“Eyes in the Ocean: AI-Driven ‘Smart-Walls’ and Elite Interdiction Units Transform Global Sea Borders”: Neeraj Gaur

February 11, 2026February 11, 2026

United States Announces Withdrawal from World Health Organization

January 25, 2026January 25, 2026

Macron at Davos Urges European Strategic Autonomy Amid Global Economic and Geopolitical Shifts

January 24, 2026January 24, 2026

Ryanair Calls Elon Musk an ‘Idiot’ as Public Feud Erupts Over Starlink and Airline Costs

January 24, 2026January 24, 2026

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

Big Breaking Entertainment

Injured Shilpa Shetty to be back on her feet soon, says ‘I am getting better’

November 28, 2025December 4, 2025

Neeraj Gaur

Big Breaking Law

Justice V Srishananda Of Karnataka High Court Expresses Regret For Objectionable Remarks: Neeraj Gaur

November 27, 2025December 4, 2025

Neeraj Gaur

Big Breaking Metropolitan Cities

Delhi pollution: US Embassy to buy 1200 boxes of True HEPA air purifier filters ASAP

November 27, 2025January 12, 2026

Hari Kaushik

Big Breaking World

Drone strike halts operations at Iraq gas field, triggers widespread power cuts

November 27, 2025December 4, 2025

Neeraj Gaur

Big Breaking National

ED conducts raids across 10 states in medical college bribery case

November 27, 2025January 12, 2026

Hari Kaushik

World

No real intent in Moscow to engage in peace talks, says von der Leyen:

November 22, 2025November 28, 2025

Neeraj Gaur

National State

Supreme Court hearing on SIR updates: Deletions from Bihar rolls were mostly not objected to during recent elections, notes CJI

November 22, 2025January 12, 2026

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>