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>

HI, i'd like to share my solution.. maybe could be useful for anyone who wants to use the block on another page.

1. Rename home.js to something like enableSlider.js
2. import enableSlider.js on main.js
3. add this on filters.php // body_class

`
add_filter('body_class', function (array $classes) {
...
// check for the slider block on the page.
// "slider-home" is the block name
if (has_block('acf/slider-home')) {
// add "enable-slider" class to body
$classes[] = 'enable-slider';

...
return array_filter($classes);
});
`
Now the script is loaded only when you use the block.

Very usefull solution!