JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="section clients section-text-right">
        <div class="content-wrapper">
            <h1>Clients</h1>
            <div class="frontpage-client-slick slick-theme-frontpage">
                <div class="scouts">Test1</div>
                <div class="jjd">Test2</div>
                <div class="unipension">Test3</div>
                <div class="dr">Test4</div>
                <div class="verdensborn">Test5</div>
                <div class="fi">Test6</div>
                <div class="midtlink">Test7</div>
            </div>
        </div>
    </div>

JavaScript

var $slideContainter = $('.frontpage-client-slick'),
    $slider = $slideContainter.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        infinite: true,
        speed: 1000,
        autoplay: true,
        autoplaySpeed: 4000,
        fade: true,
        centerMode: true
    }),
    colorSettings = {
    	headline: ['red', 'blue', 'yellow','red', 'blue', 'yellow','blue'],
      section: ['blue', 'yellow','red', 'blue', 'yellow','blue', 'red']
    },
    changeColors = function (slide) {
        $slideContainter.siblings('h1').css({color: colorSettings.headline[slide]});
        $slideContainter.parentsUntil('.section').css({backgroundColor: colorSettings.section[slide]});
    };
    
// Initial call to set color
changeColors(0);
    
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
   changeColors(nextSlide);
});