title: How to make this custom post type to have Bootstrap carousal for all images uploaded using media tab?
body: <p>I have made a simple product custom post type as plugin. I want to display the images uploaded to the post in a bootstrap carousal. 
  I also want to have this functionality only to this custom-post type.
  I am just beginner to WP development so I am not succeeding to get what i am looking for. </p>
  
  <p>Will it be better to have metaboxes for image uploads and for the carousal?</p>
  
  <p><strong>My custom post type</strong></p>
  
  <pre><code>add_action('init', 'register_product_post_type');
  function register_product_post_type(){
  
      $labels = array(
          'name' =&gt; __('products') , 
          'singular_name' =&gt; __('product'), 
          'add_new' =&gt; __('Add New') , 
          'add_new_item' =&gt; __('Add New Product') ,  
          'edit_item' =&gt; __('Edit Product') , 
          'new_item' =&gt; __('New Product'), 
          'view_item' =&gt; __('View Product'), 
          'search_items' =&gt; __('Search Products'), 
          'not_found' =&gt; __('No Product found'), 
          'not_found_in_trash' =&gt; __('No Product found in trash'), 
          'parent_item_colon' =&gt; __('Parent Product'),
          'menu_name' =&gt; __('Products'),
          );
  
      $args = array(
          'labels' =&gt; $labels,
          'hierarchical' =&gt; true,
          'description' =&gt; __('Products'),
          'register_meta_box_cb' =&gt; 'product_meta_boxes',
          'supports' =&gt; array('title', 'editor','thumbnail', 'custom-fields','post-formats', 'page-attributes','excerpt', 'post-formats'),
          'taxonomies' =&gt; array('category', 'post_tag'),
          'public' =&gt; true,
          'show_ui' =&gt; true,
          'show_in_menu' =&gt; true,
          'menu_position' =&gt; 10,
          //'menu_icon' =&gt; '',
          'show_in_nav_menus' =&gt; true,
          'publicly_queryable' =&gt; true,
          'exclude_from_search' =&gt; false,
          'has_archieve' =&gt; true,
          'query_var' =&gt; true,
          'can_export' =&gt; true,
          'rewrite' =&gt; true,
          'capability_type' =&gt; 'post',
  
          );
  
      register_post_type( 'product', $args);
  }
  </code></pre>
  
  <p><strong>This is my bootstrap code</strong>
  taken from 
  <a href="http://codepen.io/RetinaInc/pen/rxksh" rel="nofollow">http://codepen.io/RetinaInc/pen/rxksh</a></p>
  
  <pre><code>&lt;div class="col-sm-6"&gt;
      &lt;div id="carousel" class="carousel slide" data-ride="carousel"&gt;
          &lt;div class="carousel-inner "&gt;
              &lt;div class="item active "&gt;
                  &lt;img class="image" src="img/doubleRound/all-parts.JPG"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="image" src="img/doubleRound/top.JPG"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="image" src="img/doubleRound/bottom.JPG"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="image" src="img/doubleRound/front.JPG"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="image" src="img/doubleRound/front_side.JPG"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="image" src="img/doubleRound/front.JPG"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="image" src="img/doubleRound/all-parts.JPG"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img class="image" src="img/doubleRound/all-parts.JPG"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;div class="clearfix"&gt;
      &lt;div id="thumbcarousel" class="carousel slide" data-interval="false"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                  &lt;div data-target="#carousel" data-slide-to="0" class="thumb"&gt;&lt;img src="img/doubleRound/all-parts.JPG" width="100" height="100"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="1" class="thumb"&gt;&lt;img src="img/doubleRound/top.JPG" width="100" height="100"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="2" class="thumb"&gt;&lt;img src="img/doubleRound/bottom.JPG" width="100" height="100"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="3" class="thumb"&gt;&lt;img src="img/doubleRound/front.JPG" width="100" height="100"&gt;&lt;/div&gt;
              &lt;/div&gt;&lt;!-- /item --&gt;
              &lt;div class="item"&gt;
                  &lt;div data-target="#carousel" data-slide-to="4" class="thumb"&gt;&lt;img src="img/doubleRound/front_side.JPG" width="100" height="100"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="5" class="thumb"&gt;&lt;img src="img/doubleRound/front.JPG" width="100" height="100"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="6" class="thumb"&gt;&lt;img src="img/doubleRound/all-parts.JPG" width="100" height="100"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="7" class="thumb"&gt;&lt;img src="img/doubleRound/all-parts.JPG" width="100" height="100"&gt;&lt;/div&gt;
              &lt;/div&gt;&lt;!-- /item --&gt;
          &lt;/div&gt;&lt;!-- /carousel-inner --&gt;
          &lt;a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt; &lt;!-- /thumbcarousel --&gt;
  &lt;/div&gt;&lt;!-- /clearfix --&gt;
  &lt;/div&gt; &lt;!-- /col-sm-6 --&gt;
  </code></pre>