Slider shortcode

Slider Shortcode

function slider_shortcode($atts){
    extract(shortcode_atts(array(
        'count' => '5'
    ), $atts)); 
    
    $q = new WP_Query(array('post_type' => 'slider-items', 'posts_per_page' => '3', 'orderby' => 'menu_order', 'order' => 'ASC'));
    
    $list = '<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel"><div class="carousel-inner">';
    $i = 0;
    while($q->have_posts()) : $q->the_post();
    $idd = get_the_ID();
    $big_title = get_post_meta($idd, 'slide_big_title', true);
    $color_title = get_post_meta($idd, 'slide_color_title', true);
    $btn_text = get_post_meta($idd, 'btn_text', true);
    $slider_image = wp_get_attachment_image_src(get_post_thumbnail_id($idd), 'large');
    $i++;
    $active = ($i== 1 ? 'active' : '');
    
    
    $list .='
          

            <div class="item '.$active.' " style="background-image: url('.$slider_image[0].')">
                <div class="caption">
                    <h1 class="animated fadeInLeftBig"> '.$big_title.' <span>'.$color_title.'</span></h1>
                    <p class="animated fadeInRightBig">'.get_the_title().'</p>
                    <a data-scroll class="btn btn-start animated fadeInUpBig" href="#services">'.$btn_text.'</a>
                </div>
            </div>
            <a class="left-control" href="#home-slider" data-slide="prev"><i class="fa fa-angle-left"></i></a>
            <a class="right-control" href="#home-slider" data-slide="next"><i class="fa fa-angle-right"></i></a>
';
    endwhile;
    $list .= '</div></div>';
    wp_reset_query();
    return $list;
}

add_shortcode('slider', 'slider_shortcode' );