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:
- ACF Pro
- Slick slider
- ACF Gutenberg Blocks by MWDelaney
1. Install slick slider
(3rd party packages).
2. Install
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: