Trying to create shortcode/plugin for Bootstrap Carousel

One way I have done this is the past is to use a counter of sorts instead of two loops:

// The query
           $the_query = new WP_Query(array(
           'post_type' => 'carousel-image',
            'posts_per_page' => $posts,
            ));
            $i = 0;
           // The loop
           while ( $the_query->have_posts() ) :
              $the_query->the_post();
                if ( $i == 0 ) {
              $return_string .= '<div class="item active">'.get_the_post_thumbnail($post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
            <h1>'.get_the_title().'</h1>
            <p>'.get_the_excerpt().'</p>
           </div>
           </div><!-- item active -->';
              } else {
                $return_string .= '<div class="item">'.get_the_post_thumbnail($post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
            <h1>'.get_the_title().'</h1>
            <p>'.get_the_excerpt().'</p>
           </div>
           </div><!-- item -->';
                }
                $i++;
           endwhile;
           wp_reset_postdata();

           // Finish the Return String and Clean Up

since the only difference between the first “item” of the carousel and the rest is the “active” class.

Just a note about my loop, I set the default value of $posts to -1 in order to show all of them, judging by your original comment you might want to set it to 3.

Another issue I see with your original code is that you used the correct functions for the thumbnail,title and excerpt in your first loop but the incorrect ones in your second.

Finally, I took out the class “carousel-caption” while testing because my stylesheet was displaying it oddly but that could have just been my site.

Ah well the only difference from your original code and my answer on the old string is the functions that you used in your second loop.

Be sure to use get_the_title, get_permalink and get_the_post_thumbnail

there are a few ways you could do it I guess.

you could create a new variable within your while loop, something like this:

<?php
        /*
        Plugin Name: WP_BS_Carousel
        Description: Bootstrap Carousel Custom Post-Type
        Author: Jaycbrf4
        Version: 1.0
        /*/

        function wp_bs_theme_setup() {
           add_theme_support( 'post-thumbnails' );
            add_image_size( 'wp_bs_carousel_image', 1170, 385, true);
        }
        add_action( 'after_setup_theme', 'wp_bs_theme_setup' );

        // Creates Carousel Image Custom Post Type
            add_action( 'init', 'register_wp_bs_carousel_image' );
            function register_wp_bs_carousel_image() {
            $labels = array(
            'name' => _x( 'Carousel Images', 'carousel_image' ),
            'singular_name' => _x( 'Carousel Image', 'carousel_image' ),
            'add_new' => _x( 'Add New', 'carousel_image' ),
            'add_new_item' => _x( 'Add New Carousel Image', 'carousel_image' ),
            'edit_item' => _x( 'Edit Carousel Image', 'carousel_image' ),
            'new_item' => _x( 'New Carousel Image', 'carousel_image' ),
            'view_item' => _x( 'View Carousel Image', 'carousel_image' ),
            'search_items' => _x( 'Search Carousel Images', 'carousel_image' ),
            'not_found' => _x( 'No carousel images found', 'carousel_image' ),
            'not_found_in_trash' => _x( 'No carousel images found in Trash', 'carousel_image' ),
            'parent_item_colon' => _x( 'Parent Carousel Image:', 'carousel_image' ),
            'menu_name' => _x( 'Carousel Images', 'carousel_image' ),
            );
            $args = array(
            'labels' => $labels,
            'hierarchical' => false,
            'description' => 'Images for Bootsrap Carousel',
            'supports' => array( 'title', 'editor', 'thumbnail','excerpt' ),
            'taxonomies' => array( 'category' ),
            'public' => true,
            'show_ui' => true,
            'show_in_menu' => true,
            'menu_position' => 20,
            'menu_icon' => 'dashicons-images-alt',
            'show_in_nav_menus' => true,
            'publicly_queryable' => true,
            'exclude_from_search' => false,
            'has_archive' => true,
            'query_var' => true,
            'can_export' => true,
            'rewrite' => true,
            'capability_type' => 'post'
            );
            register_post_type( 'carousel-image', $args );
            } 

        function wp_bs_carousel($atts) {
           // Set Shortcode Attributes
           extract(shortcode_atts(array(
              'posts' => 1,
           ), $atts));

           // Start the Return String
           $return_string = '<div id="wp_bs_carousel" class="carousel slide carousel-fade"  data-ride="carousel">
         <div class="carousel-inner" >';

           // starting a new variable for indicators!
           $indicators = '<!-- Indicators -->
          <ol class="carousel-indicators" >';

           // The query
           $the_query = new WP_Query(array(
           'post_type' => 'carousel-image',
            'posts_per_page' => 1
            ));

           // The loop
           while ( $the_query->have_posts() ) :
              $the_query->the_post();
              $return_string .= '<div class="item active">'.get_the_post_thumbnail($post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
            <h1>'.get_the_title().'</h1>
            <p>'.get_the_excerpt().'</p>
           </div>
           </div><!-- item active -->';

           // The first indicator!!
           $indicators .= '<li data-target="#wp_bs_carousel" data-slide-to="0" class="active"></li>';

           endwhile;
           wp_reset_postdata();

           // You'll need a counter
           $i = 0;

           $the_query = new WP_Query(array(
            'post-type' => 'carousel-image',
            'posts_per_page' => $posts,
            'offset' => 1
            ));
           while ( $the_query->have_posts() ) :
           $the_query->the_post();

           // Plus 1 to your $i var
           $i++;  

           // Continue the indicator var
           $indicators .= '<li data-target="#wp_bs_carousel" data-slide-to="'.$i.'"></li>';

          $return_string  .= '<div class="item">'.get_the_post_thumbnail($post->ID, 'wp_bs_carousel_image').'<div class="carousel-caption">
            <h1>'.get_the_title().'</h1>
            <p>'.get_the_excerpt().'</p>
           </div>
           </div><!-- item -->';
           endwhile;
           wp_reset_postdata();

           // Finish the Return String and Clean Up
           $return_string .= '</div>

           // Finishing up the indicators var and add it to $return_string
           $indicators .= '</ol>';

           $return_string .= $indicators;

             <!-- Controls -->
          <a class="left carousel-control" href="#wp_bs_carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#wp_bs_carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>';

           return $return_string;
        }

        add_shortcode('carousel', 'wp_bs_carousel');

        ?>

I haven’t tested this but it should work I think. You’ll notice I used your original code (with the proper get_ functions subbed in).