Custom Post Type Slider

A block that queries and outputs custom post types in a slider using slickslider.

REQUIRED LIBRARIES (insert these in enqueuing styles and scripts in functions.php):
wp_enqueue_script( ‘slick-js’, ‘https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js’);
wp_enqueue_style( ‘slick-css’, ‘https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css’ );

REQUIRED LAZYBLOCK FIELDS:
slide-count = NUMBER
button-text = TEXT
title-color = COLOR PICKER
title-size = NUMBER

Still looking for solutions on how to make slickslider work in wp backend.

Projects where this custom block has been applied: Steven Chernoff(staging)

<?php
/**
 * Template for Auctions Slider
 */

$slide_count = $attributes['slide-count'];
$button_text = $attributes['button-text'];
$title_color = $attributes['title-color'];
$title_size = $attributes['title-size'];
$title_transform = $attributes['title-transform'];
$args = array(
    'posts_per_page' => $slide_count,
    'post_type' => 'auctions',
    'post_status' => array( 
        'publish',
        'future'
    ),
    'category__in' => 1385
);

?>

<style>
    .as-item-inner {
        color: <?php echo $title_color; ?>;;
        display: flex;
        flex-wrap: wrap;
        background: black;
        height: 740px;
        align-items: center;
    }
    .as-info-container{ width: 45%; }
    .as-image-container{
        width: 55%;
        position: relative;
        height: 100%;
    }
    .as-image-container:before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(90deg, black 0%, transparent 35%);
        width: 100%;
        height: 100%;
    }
    .as-image-container img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 80%;
    }
    .as-info-container p { margin: 0; }
    .as-info-container .as-date {
        letter-spacing: 2px;
        font-size: 14px;
        text-transform: uppercase;
    }
    .as-info-container .as-title {
        margin: 0 0 15px;
        text-transform: <?php echo $title_transform; ?>;
        font-size: <?php echo $title_size; ?>px;
        font-weight: 600;
    }
    .as-info-container .as-excerpt { font-size: 20px; }
    .as-info-container .as-button{
        background: white;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 14px 35px;
        display: block;
        width: fit-content;
        border-radius: 4px;
        margin-top: 30px;
        text-decoration: none;
        line-height: normal;
        font-weight: 600;
    }
</style>

<div class="auctions-slider-container">
    <div class="as-inner">
        <?php
            $auctions = new WP_Query( $args );
            if( $auctions->have_posts() ) :
            while( $auctions->have_posts() ) : $auctions->the_post();
        ?>
            <div class="as-item">
                <div class="as-item-inner">
                    <div class="as-info-container padded-left">
                        <p class="as-date"><?php the_date(); ?></p>
                        <h2 class="as-title"><?php the_title(); ?></h2>
                        <p class="as-excerpt"><?php the_excerpt(); ?></p>
                        <a class="as-button" href="<?php the_permalink(); ?>"><?php echo $button_text; ?></a>
                    </div>  
                    <div class="as-image-container">
                        <img class="as-img" src="<?php echo get_the_post_thumbnail_url(); ?>" />
                    </div>
                </div>
            </div>
        <?php 
            endwhile; wp_reset_postdata();
            else :
        ?>
            <div class="as-nopost">
                <p>no posts found.</p>
            </div>
        <?php endif; ?>
    </div>
</div>

<script>
    jQuery(document).ready(function( $ ){
        $('.as-inner').slick({
            draggable: true,
            autoplay: false,
            // autoplaySpeed: 7000,
            arrows: false,
            dots: false,
            // appendDots: $('.post-slider-container .post-slider-inner'),
            fade: true,
            speed: 400,
            infinite: true,
            cssEase: 'ease',
            touchThreshold: 100
        });
    });
</script>