Hello. The essence of the problem is this: there is a slider on Slick.js, which has six slides. You need to set the background-color of each button so that when you click on a button, it displays its own background color => each button has its own background color.

$(document).ready(function() { $('.mobile-slider').slick({ slidesToShow: 1, dots: true, mobileFirst: true, arrows: false }); }); 
 .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"> <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"> <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"> <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"> <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"> <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"> <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>

    1 answer 1

    Here is the implementation:

    Each div with a mobile-slide class added a data-color attribute, and as you can see from the id slider codes of the clickable circles are recorded in the same div in the aria-describedby attribute, they are also related, so the click event on the circles added and it took the data-color attribute and inserted into the background current clicked element.

     $(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>