National – THE ALERT INDIA

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

December 21, 2025December 21, 2025

Income Tax Department Raids Shilpa Shetty’s Mumbai Residence in ₹60-Crore Fraud Probe

December 18, 2025December 18, 2025

IN Bondi Beach Gunman Identified as Hyderabad Native; Indian Police Rule Out Local Radicalisation: The Alert India.

December 16, 2025December 16, 2025

India’s Exports Rise 15.5% in November 2025 as Services and Engineering Goods Drive Trade Growth

December 16, 2025December 17, 2025

The Silent Crisis: Academic Pressure on Students and Parents in India

December 10, 2025December 10, 2025

Scindia, Starlink Officials Discuss Satellite Internet Expansion to India’s Remote Corners

December 10, 2025December 10, 2025

Haryana Police Intensifies Crackdown with Major Operations: DGP O.P. Singh Briefs on Anti-Crime Strategies

December 10, 2025December 10, 2025

Big Breaking Entertainment

Income Tax Department Raids Shilpa Shetty’s Mumbai Residence in ₹60-Crore Fraud Probe

December 18, 2025December 18, 2025

Neeraj Gaur

Big Breaking National

IN Bondi Beach Gunman Identified as Hyderabad Native; Indian Police Rule Out Local Radicalisation: The Alert India.

December 16, 2025December 16, 2025

Neeraj Gaur

Big Breaking Economy

India’s Exports Rise 15.5% in November 2025 as Services and Engineering Goods Drive Trade Growth

December 16, 2025December 17, 2025

Neeraj Gaur

Big Breaking Editorial

The Silent Crisis: Academic Pressure on Students and Parents in India

December 10, 2025December 10, 2025

Neeraj Gaur

Big Breaking National

Scindia, Starlink Officials Discuss Satellite Internet Expansion to India’s Remote Corners

December 10, 2025December 10, 2025

Neeraj Gaur

Big Breaking Metropolitan Cities

Haryana Police Intensifies Crackdown with Major Operations: DGP O.P. Singh Briefs on Anti-Crime Strategies

December 10, 2025December 10, 2025

Neeraj Gaur

Big Breaking Economy

RBI Cuts Repo Rate to 5.25% as Inflation Falls to Record Low

December 8, 2025December 8, 2025

Neeraj Gaur

Big Breaking National

Indian Army Successfully Executes Combat Launch of BrahMos Supersonic Cruise Missile

December 3, 2025December 4, 2025

Neeraj Gaur

Big Breaking National

Centre Softens Stance on Sanchar Saathi App Amid Lok Sabha Privacy Row: The Alert India

December 3, 2025December 4, 2025

Neeraj Gaur

Big Breaking National

Narendra Modi’s remarks on “drama”Parliament witnessed heated exchanges. The Alert India.

December 1, 2025December 4, 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>