Как настроить background-color для кнопок слайдера?

$(document).ready(function() { 
  $('.mobile-slider').slick({ 
    slidesToShow: 1, 
    dots: true, 
    mobileFirst: true, 
    arrows: false 
  }); 
  $('.slick-dots>li').on('click', function(){ 
    var image_data = $(this).attr('id'); 
    var li_color = $('div[aria-describedby="'+image_data+'"]').data('color'); 
    $('.slick-dots>li>button').css({backgroundColor: '#FFFFFF'}); 
    $(this).find('button').css({backgroundColor: li_color}); 
  }); 
});

.mobile-slider { 
	display: block; 
	height: 90vh; } } 
 
.mobile-slider .mobile-slide { 
width: 100vw; 
height: 90vh; 
background-size: cover; 
background-position: 50% 50%; 
display: -webkit-box; 
display: flex; 
-webkit-box-orient: vertical; 
-webkit-box-direction: normal; 
flex-direction: column; } 
 
.mobile-slider .mobile-slide .mobile-inline { 
display: -webkit-inline-box; 
display: inline-flex; 
margin-left: 5vw; 
margin-right: 5vw; } 
 
.mobile-slider .mobile-slide .mobile-inline margin-top 35vh h1 { 
color: #fff; } 
 
.mobile-slider .mobile-slide h1 { 
font-family: 'Adineue'; 
color: #fff; } 
 
.mobile-slider .mobile-slide p { 
font-family: 'Lato'; 
color: #fff; 
display: -webkit-inline-box; 
display: inline-flex; 
margin-left: 5vw; 
margin-right: 20vw; } 
 
.mobile-slider .mobile-slide .mobile-inline-bottom { 
display: -webkit-inline-box; 
display: inline-flex; 
-webkit-box-align: center; 
align-items: center; } 
 
.mobile-slider .mobile-slide .mobile-inline-bottom p { 
font-family: 'Adineue'; } 
 
.mobile-slider .mobile-slide-roof { 
background-image: url('http://new.rofas.kz/images/roof-bg.png'); } 
 
.mobile-slider .mobile-slide-roof .mobile-inline-bottom p { 
margin-right: 2vw; 
color: #e64e4e; } 
 
.mobile-slider .mobile-slide-fasad { 
background-image: url('http://new.rofas.kz/images/fasad-bg.png'); } 
 
.mobile-slider .mobile-slide-fasad .mobile-inline-bottom p { 
margin-right: 2vw; 
color: #f7a550; } 
 
.mobile-slider .mobile-slide-design { 
background-image: url('http://new.rofas.kz/images/design-bg.png'); } 
 
.mobile-slider .mobile-slide-design .mobile-inline-bottom p { 
margin-right: 2vw; 
color: #fedd32; } 
 
.mobile-slider .mobile-slide-industry { 
background-image: url('http://new.rofas.kz/images/industry-bg.png'); } 
 
.mobile-slider .mobile-slide-industry .mobile-inline-bottom p { 
margin-right: 2vw; 
color: #51b9f1; } 
 
.mobile-slider .mobile-slide-eco { 
background-image: url('http://new.rofas.kz/images/eco-bg.png'); } 
 
.mobile-slider .mobile-slide-eco .mobile-inline-bottom p { 
margin-right: 2vw; 
color: #70ca57; } 
 
.mobile-slider .mobile-slide-stone { 
background-image: url('http://new.rofas.kz/images/stone-bg.png'); } 
 
.mobile-slider .mobile-slide-stone .mobile-inline-bottom p { 
margin-right: 2vw; 
color: #956ccc; } 
 
.slick-dots { 
  display: -webkit-box; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  flex-direction: column; 
  z-index: 1; 
  position: fixed; 
  top: 12vh; 
  right: 8vw; 
  list-style: none; 
} 
 
.slick-dots button { 
  width: 30px; 
  height: 30px; 
  border-radius: 50%; 
  border: 1px solid #fff; 
  background-color: #000; 
  background-color: rgba(0, 0, 0, 0); 
  color: #000; 
  color: rgba(0, 0, 0, 0); 
  margin-bottom: 2vh; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" /> 
<div class="mobile-slider"> 
  <div class="mobile-slide mobile-slide-roof" data-color="#456789"> 
    <div class="mobile-inline" style="margin-top: 40vh"> 
      <h1>Rofas</h1> 
      <h1 style="margin-left: 3vw; color: #e64e4e; font-family: 'ABold'">Roof</h1> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <div class="mobile-inline-bottom"> 
      <p>Rofas Roof</p><img src="http://new.rofas.kz/icons/right-arrow-roof.png"></div> 
  </div> 
  <div class="mobile-slide mobile-slide-fasad" data-color="#456123"> 
    <div class="mobile-inline" style="margin-top: 40vh"> 
      <h1>Rofas</h1> 
      <h1 style="margin-left: 3vw; color: #f7a550; font-family: 'ABold'">Facade</h1> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <div class="mobile-inline-bottom"> 
      <p>Rofas Facade</p><img src="http://new.rofas.kz/icons/right-arrow-fasad.png"></div> 
  </div> 
  <div class="mobile-slide mobile-slide-design" data-color="#456705"> 
    <div class="mobile-inline" style="margin-top: 40vh"> 
      <h1>Rofas</h1> 
      <h1 style="margin-left: 3vw; color: #fedd32; font-family: 'ABold'">Design</h1> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <div class="mobile-inline-bottom"> 
      <p>Rofas Design</p><img src="http://new.rofas.kz/icons/right-arrow-design.png"></div> 
  </div> 
  <div class="mobile-slide mobile-slide-industry" data-color="#456789"> 
    <div class="mobile-inline" style="margin-top: 40vh"> 
      <h1>Rofas</h1> 
      <h1 style="margin-left: 3vw; color: #51b9f1; font-family: 'ABold'">Industry</h1> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <div class="mobile-inline-bottom"> 
      <p>Rofas Industry</p><img src="http://new.rofas.kz/icons/right-arrow-industry.png"></div> 
  </div> 
  <div class="mobile-slide mobile-slide-eco" data-color="#450089"> 
    <div class="mobile-inline" style="margin-top: 40vh"> 
      <h1>Rofas</h1> 
      <h1 style="margin-left: 3vw; color: #70ca57; font-family: 'ABold'">Eco</h1> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <div class="mobile-inline-bottom"> 
      <p>Rofas Industry</p><img src="http://new.rofas.kz/icons/right-arrow-eco.png"></div> 
  </div> 
  <div class="mobile-slide mobile-slide-stone" data-color="#006789"> 
    <div class="mobile-inline" style="margin-top: 40vh"> 
      <h1>Rofas</h1> 
      <h1 style="margin-left: 3vw; color: #956ccc; font-family: 'ABold'">Stone</h1> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <div class="mobile-inline-bottom"> 
      <p>Rofas Industry</p><img src="http://new.rofas.kz/icons/right-arrow-stone.png"></div> 
  </div> 
</div>