Title: More than one Bootstrap Carousel with shortcode?
Last modified: August 30, 2016

---

# More than one Bootstrap Carousel with shortcode?

 *  [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/more-than-one-bootstrap-carousel-with-shortcode/)
 * I have created a custom post type for my Bootstrap theme to create a Bootstrap
   Carousel and shortcode to place a carousel on a page.
 * Problem is I would like to have multiple carousels on my site but can only create
   1 with my code.
 * How do I modify code to be able to create multiple carousels and place with shortcode
   like [carousel id=”xx”]?
 * Here is my code :
 *     ```
       function jd_bs_theme_setup() {
             add_image_size( 'jd_bs_carousel_image', 1170, 385, true);
         }
         add_action( 'after_setup_theme', 'jd_bs_theme_setup' );
   
         // Creates Carousel Image Custom Post Type
             add_action( 'init', 'register_jd_bs_carousel_image' );
             function register_jd_bs_carousel_image() {
             $labels = array(
             'name' => _x( 'Carousel Images - use shortcode[carousel] to insert into page or post', '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','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 jd_bs_carousel($atts) {
            // Set Shortcode Attributes
            extract(shortcode_atts(array(
               'posts' => -1,
            ), $atts));
   
            // Start the Return String
            $return_string = '<div id="jd_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' => $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($the_query->post->ID,'jd_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="#jd_bs_carousel" data-slide-to="0" class="active"></li>';
                       }
                        else {
                         $return_string .= '<div class="item">'.get_the_post_thumbnail($the_query->post->ID,'jd_bs_carousel_image').'<div class="carousel-caption">
                     <h1>'.get_the_title().'</h1>
                     <p>'.get_the_excerpt().'</p>
                    </div>
                    </div><!-- item -->';
                        // Continue the indicator var
                    $indicators .= '<li data-target="#jd_bs_carousel" data-slide-to="'.$i.'"></li>';
                                      }
   
                    $i++;
                    endwhile;
                    wp_reset_postdata();
   
                                    // Finishing up the indicators var and add it to $return_string
                    $indicators .= '</ol>';
   
                    $return_string .= $indicators;
   
                    // Finish the Return String and Clean Up
            $return_string .= '</div>
   
              <!-- Controls -->
           <a class="left carousel-control" href="#jd_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="#jd_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', 'jd_bs_carousel');
       ```
   
 * Please help, I need to complete this project ASAP

The topic ‘More than one Bootstrap Carousel with shortcode?’ is closed to new replies.

## Tags

 * [Bootstrap Carousel](https://wordpress.org/support/topic-tag/bootstrap-carousel/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 0 replies
 * 1 participant
 * Last reply from: [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/more-than-one-bootstrap-carousel-with-shortcode/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics