Custom Banner Slider

To create a custom Banner Slider, please follow these steps and instructions. Note: You may modify this to suit the design and theme of your site.

1. Create a Custom Post Type. In this example, it is named “banner_slider
2. Add a custom field to the “banner_slider” post type.
   • Example fields:
     • Title
     • Description
     • Buttons
3. Add a custom block using the Lazyblock plugin and set it to the Theme Template.

Insert this code into the functions.php

wp_enqueue_style( 'slick-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css' );
wp_enqueue_script( 'slick-js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js');

Insert this code into the Custom Block. Note: You may modify this code to suit the design and theme of your site.

<?php
/**
** Block Name: Custom Banner Slider
** Author Name: MonLigan
**/
$args1 = array(
    'post_type' => 'banner_slider',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'order'=>'ASC',
);
?>
<style>
.banner_slider_box {
	position: relative;
	min-height: 913px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display:flex !important;
	align-items:center;
}
.banner_slider-content{
	width:1280px;
	margin:auto;
}
.banner_slider-group{
	width:716px;
}
.banner_slider-content .title_name{
	color:#E01A27;
}
.banner_slider-content a{
	color:#F05827;
	font-size:16px;
	font-weight:600;
}
.banner_slider-content .custom_btn{
	margin-top:30px;
}
	
/* ARROW SLIDER */
.banner_slider .slick-arrow {
    position: absolute;
    z-index: 10;
    bottom: 50%;
    color: #ffffff;
    width: 70px;
    height: 40px;
    border: none;
    background: transparent;
	font-size:0;
}
.banner_slider .slick-prev.slick-arrow {
    left: 66px;
    background: url('/wp-content/uploads/Arrow-1.png') 0 0 / 100% no-repeat;
}
.banner_slider .slick-next.slick-arrow {
    right: 66px;
    background: url('/wp-content/uploads/Arrow-2.png') 0 0 / 100% no-repeat;
}
.banner_slider .slick-arrow:hover{
	transition:all .25s ease-in-out;
	transform:scale(1.1);
	border:none;
}

</style>

<div class="banner_slider">
    <?php
        $my_query = new WP_Query($args1);
        if( $my_query->have_posts() ) :
        while( $my_query->have_posts() ) : $my_query->the_post(); 
        $title_name = get_field('title_name');
        $title_desc = get_field('title_description');
        $content = get_field('content');
        $link = get_field('button');
        if( $link ): 
            $link_url = $link['url'];
            $link_title = $link['title'];
            $link_target = $link['target'] ? $link['target'] : '_self';
        endif;
        $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); 

    ?>
        <div class="banner_slider_box" style="background-image: url('<?php echo $image[0]; ?>');">
            <div class="banner_slider-content">
                <div class="banner_slider-group">
                    <h1><span class="title_name"><?=$title_name?></span> <span><?=$title_desc?></span></h1>
                    <p><?=$content?></p>
                    <div class="wp-block-button custom_btn">
                        <a class="wp-block-button__link wp-element-button" href="<?=$link_url?>" target="<?=$link_target?>"><?=$link_title?></a> 
                    </div>
                </div>
            </div>
        </div>
    <?php
        endwhile;
        wp_reset_postdata();
        endif; 
    ?>
</div>
<script>
    jQuery(document).ready(function($) {
        $('.banner_slider').slick({
	    rows: 1,
            dots: false,
            arrows: true,
            infinite: true,
            fade: true,
            speed: 500,
            slidesToShow: 1,
        });
    });
</script>