ACF Pro Block, Sage 9, Gutenberg - Complete slider with image field, text field, color picker for change text bg.

global.scss

// Home page slider
.slick-homepage {
	margin: 0 auto;
}

.slick-homepage>.slick-prev {
	left: 40px !important;
	z-index: 1;	
}

.slick-homepage>.slick-next {
	right: 40px !important;
	z-index: 1;
}

.slick-homepage .home-slider-text {
    width: 10% !important;
    position: absolute;
    bottom: 2%;
    margin-left: 80px;
}

.slick-homepage  .home-slider-text p {
	padding: 30px;
}

home.js

export default {
  init() {
    $('.slick-homepage').slick({
			arrows: true,
			autoplaySpeed: 3000,
		});
  },
  finalize() {
    // JavaScript to be fired on the home page, after the init JS
  },
};

slider-home.blade.php

{{--
  Title: Slider Home
  Description: Slider in fist section in home
  Category: formatting
  Icon: admin-comments
  Keywords: testimonial quote
  Mode: edit
  Align: left
  PostTypes: page post
  SupportsAlign: left right
  SupportsMode: false
  SupportsMultiple: false
--}}



    <div data-{{ $block['id'] }} class="{{ $block['classes'] }}">

         @if( have_rows('slider_images') )

          <div class="slick-homepage">

          @while( have_rows('slider_images') ) @php the_row(); @endphp 

            <li>

              <img src="{{ get_sub_field('slider_home_image')['url'] }}" alt="{{ get_sub_field('slider_home_image')['alt'] }}" />

              <div class="home-slider-text">
                <div style="background-color:{{ get_sub_field('slider_text_bg_color') }}">
                {!! get_sub_field('slider_home_text') !!}
                </div>
              </div>  

            </li>

          @endwhile

          </div>

        @endif

    </div>

Very usefull solution!