# ACF Block + Slick slider + Gutenberg - slider code and short tutorial

**URL:** https://discourse.roots.io/t/acf-block-slick-slider-gutenberg-slider-code-and-short-tutorial/17443
**Category:** sage
**Created:** 2020-01-16T15:21:01Z
**Posts:** 2

## Post 1 by @Jacek — 2020-01-16T15:21:01Z

Hi Guys,

I want to share my code and short tutorial how to make easy slider, with text field and bg picker. Maybe that will be helpful for Sage9 beginer users who starts create themes with Sage (like me). No controllers, this is simple slider, but maybe will be helpfully for you. Because on the forum it’s a lot simillar posts - in this topic is done code, with step by step tutorial.

You need:

1. ACF Pro
2. Slick slider
3. ACF Gutenberg Blocks by MWDelaney

**1. Install slick slider**

> **[Theme Development and Building | Sage Documentation | Roots](https://roots.io/sage/docs/theme-development-and-building/)**
>
> Sage uses npm, Webpack, Browsersync, and other modern front-end tools for theme development. Stylesheets and JavaScript files are automatically linted.

(3rd party packages).

**2. Install**

> **[MWDelaney/sage-acf-wp-blocks](https://github.com/MWDelaney/sage-acf-wp-blocks)**
>
> Composer library for generating ACF Gutenberg blocks from templates. - MWDelaney/sage-acf-wp-blocks

**3. In views create folder “blocks” and add file "slider-home.blade.php"**

/views/blocks/slider-home.blade.php

add below code in this file.

{{–  
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>
```

**4. In ACF create Repater field “slider\_images”, set blocks is equal to, select Slider Home**

**5. Create 3 fields in repater**

- slider\_home\_image, set: Images, full size, return array
- slider\_home\_text, set editor WYSIWYG
- slider\_text\_bg\_color, set color picker

SAVE

**6. Add below slick script in common.js or home or wherever you want to load it.**

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

**7. Add below css to global.scss**

```
.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;
}
```

yarn build

Now in your page you can add Slider Home, there you can add images, text and set bg color.

This is super easy slider, but should be helpful for quick start.

gist:

> <https://gist.github.com/blift/4c429fba79b5117fdd8a079c856ef373>

---

## Post 2 by @system — 2020-02-27T15:21:04Z

This topic was automatically closed after 42 days. New replies are no longer allowed.