Custom post type shortcode

I create a custom post type shortcode as slider. My sliders images are displayed in background image as a featured image. But featured image is not displaying in my slides.

Here is my code:

<?php
add_shortcode( 'slickslider', 'slider_shortcodes_post_type' );

function slider_shortcodes_post_type(){
    $args = array(
        'post_type' => 'slider',
        'post_status' => 'publish'
    );

    $string = '';
    $h_query = new WP_Query( $args );
    if( $h_query->have_posts() ){
        $string .= '<div class="home-slides owl-carousel owl-theme">';
        while( $h_query->have_posts() ){
            $h_query->the_post();

            // slider buttons
            // first button  text
            $slider_buttons1txt =  $sliderbtntxt1 = get_post_meta(get_the_ID(), 'slider_button1_text', true);
            if( !empty($slider_buttons1txt) ): endif;
            
            // first button text link
            $slider_buttons1link =   $sliderbtntxtlink = get_post_meta(get_the_ID(), 'slider_button1_text_link', true);
            if( !empty($slider_buttons1link) ): endif;
            
            // second button  text
            $slider_buttons2txt =  $sliderbtntxt2 = get_post_meta(get_the_ID(), 'slider_button2_text', true);
            if( !empty($slider_buttons2txt) ): endif;

            // first button text link
            $slider_buttons2link = $sliderbtn2txtlink = get_post_meta(get_the_ID(), 'slider_button2_text_link', true);
            if( !empty($slider_buttons2link) ): endif;

             // background images 
            $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
              
            $string .=' <div class="main-slider-item" style="background-image: url(<?php echo $backgroundImg[0]; ?>); background-size: cover; background-repeat: no-repeat;">' . 
            ' <div class="d-table">' . 
                ' <div class="d-table-cell">' . 
                    '<div class="container">'.
                        ' <div class="main-slider-content">' .
                        '<h1>' . get_the_title() . '</h1>' .
                        get_the_content() .
                        ' <div class="slider-btn">'.
                        '<a href="'.$slider_buttons1link.'" class="default-btn">' .  $slider_buttons1txt . '</a>' .
                        '<a href="'.$slider_buttons2link.'" class="default-btn-two">' .  $slider_buttons2txt . '</a>' .
                        '</div>'.
                        ' </div>' . 
                    '</div>' .
                ' </div>'. 
            ' </div>' . 
            '</div>';
            
        }
        $string .= '</div>';
    }
    wp_reset_postdata();
    return $string;
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Its done :

 $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
              
 $string .=' <div class="main-slider-item" style="background-image: url('.$backgroundImg[0].'); background-size: cover; background-repeat: no-repeat;">' .

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0