_____________________ html _________________

<div class="highlighted-content-block reverse">
    <div class="content-wrapper">
        <!-- road-safety-slider -->
        <div class="road-safety-road-safety-slider-right">
            <div class="road-safety-slider">
                <div class="road-safety-slides">
                    <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-01.jpeg" alt="" > <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-02.jpeg" alt="" > <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-03.jpeg" alt="" > <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-04.jpeg" alt="" > <img src="/sites/default/files/images/traffic-training-park/PUNJABI-BAGH-05.jpeg" alt="" >
                </div>
            </div>
            <p>
                <button class="road-safety-slider-btn prev">❮</button> 
<button class="road-safety-slider-btn next">❯</button>
            </p>
        </div>
        <!-- Content -->
        <div class="content-left">
            <h3>
                TRAFFIC TRAINING PARK PUNJABI BAGH
            </h3>
            <ul class="content-list">
                <li>
                    Special attraction: Four Wheeler Simulator Training.
                </li>
                <li>
                    Refresher course for Delhi police drivers and new recruits.
                </li>
                <li>
                    Road safety awareness camps.
                </li>
            </ul>
        </div>
    </div>
</div>

________________________________________________


/****************** About roas safety page slides********************************/



(function (Drupal, once, $) {
  Drupal.behaviors.aboutRoadSafetyPage = {
    attach: function (context) {

      console.log('akakaka');

      $(once('custom-slider', '.road-safety-slider', context)).each(function () {

        const $slider = $(this);
        const $slides = $slider.find('.road-safety-slides');
        const $images = $slides.find('img');

        // buttons slider ke bahar hain – parent se lo
        const $container = $slider.closest('.road-safety-road-safety-slider-right');
        const $prevBtn = $container.find('.road-safety-slider-btn.prev');
        const $nextBtn = $container.find('.road-safety-slider-btn.next');

        if (!$slides.length || !$images.length || !$prevBtn.length || !$nextBtn.length) {
          console.warn('Slider elements missing');
          return;
        }

        let index = 0;
        const totalSlides = $images.length;
        let autoSlideInterval;

        function showSlide(i) {
          $slides.css('transform', 'translateX(-' + (i * 100) + '%)');
        }

        function startAutoSlide() {
          autoSlideInterval = setInterval(function () {
            index = (index + 1) % totalSlides;
            showSlide(index);
          }, 3000);
        }

        function resetAutoSlide() {
          clearInterval(autoSlideInterval);
          startAutoSlide();
        }

        $nextBtn.on('click', function () {
          console.log('kokoko next');
          index = (index + 1) % totalSlides;
          showSlide(index);
          resetAutoSlide();
        });

        $prevBtn.on('click', function () {
          console.log('kokoko prev');
          index = (index - 1 + totalSlides) % totalSlides;
          showSlide(index);
          resetAutoSlide();
        });

        startAutoSlide();

      });
    }
  };
})(Drupal, once, jQuery);

______________________________________


css 

-----------------


/**********About Road safety basic page********************************/




/* ===============================
   Highlighted Content Block
================================ */

.highlighted-content-block {
    margin: 20px 0;
    padding: 30px 25px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9e6e6;
    border-left: 6px solid #003366;
    box-shadow: rgba(0, 0, 0, 0.12) 0 6px 18px;
    font-family: var(--font-family-Poppins);
}

/* ===============================
   Layout
================================ */

.content-wrapper {
    display: flex;
    gap: 2vw;
    align-items: center;
    flex-wrap: wrap;
}

.content-left {
    flex: 1 1 45%;
    min-width: 280px;
}

.content-left h3 {
    font-size: 22px;
    color: #003366;
    margin-bottom: 15px;
}

.content-list {
    list-style: none;
    padding-left: 0;
}

.content-list li {
    font-size: var(--font-content-size-18);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ===============================
   road-safety-slider
================================ */

.road-safety-road-safety-slider-right {
    flex: 1 1 50%;
    min-width: 300px;
    max-width: 35vw;
    position: relative;
    margin: 0 auto;
}

.road-safety-slider {
    overflow: hidden;
    border-radius: 8px;
}

.road-safety-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.road-safety-slides img {
    width: 100%;
    flex-shrink: 0;
    border-radius: 8px;
    max-height: 20vw ;
}

/* ===============================
   road-safety-slider Buttons
================================ */

.road-safety-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    z-index: 2;
}

.road-safety-slider-btn.prev {
    left: 10px;
}

.road-safety-slider-btn.next {
    right: 10px;
}

/* ===============================
   Responsive
================================ */

@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .content-left,
    .road-safety-road-safety-slider-right {
        max-width: 100%;
    }
}