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.

Will it be better to have metaboxes for image uploads and for the carousal?

My custom post type

add_action('init', 'register_product_post_type');
function register_product_post_type(){
    $labels = array(
        'name' => __('products') , 
        'singular_name' => __('product'), 
        'add_new' => __('Add New') , 
        'add_new_item' => __('Add New Product') ,  
        'edit_item' => __('Edit Product') , 
        'new_item' => __('New Product'), 
        'view_item' => __('View Product'), 
        'search_items' => __('Search Products'), 
        'not_found' => __('No Product found'), 
        'not_found_in_trash' => __('No Product found in trash'), 
        'parent_item_colon' => __('Parent Product'),
        'menu_name' => __('Products'),
        );
    $args = array(
        'labels' => $labels,
        'hierarchical' => true,
        'description' => __('Products'),
        'register_meta_box_cb' => 'product_meta_boxes',
        'supports' => array('title', 'editor','thumbnail', 'custom-fields','post-formats', 'page-attributes','excerpt', 'post-formats'),
        'taxonomies' => array('category', 'post_tag'),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'menu_position' => 10,
        //'menu_icon' => '',
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archieve' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post',
        );
    register_post_type( 'product', $args);
}

This is my bootstrap code
taken from
http://codepen.io/RetinaInc/pen/rxksh

<div class="col-sm-6">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner ">
            <div class="item active ">
                <img class="image" src="img/doubleRound/all-parts.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/top.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/bottom.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/front.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/front_side.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/front.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/all-parts.JPG">
            </div>
            <div class="item">
                <img class="image" src="img/doubleRound/all-parts.JPG">
            </div>
        </div>
    </div> 
<div class="clearfix">
    <div id="thumbcarousel" class="carousel slide" data-interval="false">
        <div class="carousel-inner">
            <div class="item active">
                <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/doubleRound/top.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/doubleRound/bottom.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
            </div><!-- /item -->
            <div class="item">
                <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
            </div><!-- /item -->
        </div><!-- /carousel-inner -->
        <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->

Read more here: How to make this custom post type to have Bootstrap carousal for all images uploaded using media tab?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , , , ,

Wordpress related questions and answers: