我如何得到一个引导模式的工作和打开每个幻灯片(自定义帖子类型)动态

好的，我有一个滑动条，它可以完美地生成所有自定义的帖子类型的图像和文本。现在我需要当我点击滑块中的内容为模态打开一些内容从模态和描述字段，我设置了高级自定义字段。这是slider组件的代码:

  <div id="it-list" class="container section">
     <div class="section-wrapper">
       <h3 class="widget-title"><span>2016 "IT LIST" HONOREES</span></h3>      
       <div class="slide-wrapper">
       <div class="it-list-slide">
       <?php
    wp_reset_postdata();
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array(
        'post_type' => 'ddg-itlist',
        'numberposts' => -1,
        'orderby' => 'rand',  
    );
    $postslist = get_posts( $args );
    foreach ($postslist as $post) :  setup_postdata($post);
    $featuretitle = get_the_title($post->ID);
    $post_id    = get_the_id();
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );   
    ?>
    <div class="main-slide-div col-sm-4 center">
        <a href="#" class="modal-toggle" data-toggle="modal" data-target="#post<?php echo $post_id; ?>">
            <div class="it-list-profile-image" style="background-image: url('<?php echo $thumb['0']; ?>');"></div>
            <h4 class="it-list-profile-title"><?php echo $featuretitle; ?></h4>
            <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p>
            <img src="<?php the_field('company_logo'); ?>" class="slide-logo">
        </a>
    </div><!-- end of main slide div -->
                           <!-- Modal -->
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      <div class="modal-body">
        <div class="it-list-profile">
            <div class="it-list-profile-info">
                <div class="row">
                    <div class="it-list-profile-image modal-profile-img col-xs-4 col-sm-4 col-md-5" style="background-image: url('<?php echo $thumb['0']; ?>');">
                    </div><!-- end of modal-profile-image -->
                    <div class="col-xs-8 col-sm-8 col-md-7">
                        <h1><?php echo $featuretitle; ?></h1>
                        <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p>
                        <img src="<?php the_field('company_logo'); ?>" class="slide-logo">
                        <p class="itlist-profile-jobtitle"><?php the_field('description_quote'); ?></p>
                    </div><!-- end of text and logo -->
                </div><!-- end of row -->
            </div><!-- end of it-list-profile-info -->
            <div class="it-list-description">
                <p><?php the_field('description_paragraph'); ?></p>
            </div><!-- end of it-list-description --> 
        </div><!-- end of it-list profile -->
      </div><!-- end of modal body -->
      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div> -->
    </div><!-- end of modal content -->
  </div><!-- end of modal dialog -->
</div><!-- end of modal -->

    <?php endforeach; ?>
</div><!-- end of it slide -->
</div><!-- end of slide wrapper -->