change CSS according to active slider via using Swiper

[kohkoksiang]

Dear Sir/Madam,

Is it possible change the css according to the particular active slider? Via using Swiper. For example, If the slider 1 is active, it will change the css etc. adding color background, change the image.

I want to manipulate and change css accordingly. Attached herewith the picture, which is shown what I want to do the changing accordingly.

I enclosed herewith my PenCode for reference( I able to change content accordingly, but I do not know how to change as illustrated in the below attached picture)

https://codepen.io/koksiang/pen/rNdrzqQ

//Banner
$(document).ready(function(){
  var swiper = new Swiper(".bannerSwipper", {
    // autoHeight:true,
    autoplay:
     {
      delay: 5000,
      disableOnInteraction: false
    },
    speed: 500,
    direction: "horizontal",

    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    loop: false,
    // allowTouchMove: false,
    breakpoints: {
      600: {
          slidesPerView: 1,
          touchRatio: 1
      },
      768: {
          slidesPerView: 1,
          touchRatio: 0
      }
  },
    effect: "slide",
    pagination: {
            el: ".swiper-pagination",
            type: "progressbar",

          },
    on:{

      slideChangeTransitionStart: function () {
        $(".content").removeClass("active");
        $(".content").eq(swiper.realIndex).addClass("active");
        console.log("content is changing accordingly"); 
      }
    }
  });

  $(window).scroll(function(){ 

    var $height=$(window).scrollTop(); 

    if($height > 50){ 
      swiper.autoplay.stop();
      // console.log('slider stopped');


    } 
    else {
      swiper.autoplay.start();
      // console.log('slider started again');

     } 

  }); 
});