jquery - 如何解决 Wordpress 的 Bootstrap 轮播缩略图中的元素事件和数据源部分？

Question

我只是尝试为我的产品 slider 添加一个带缩略图的 Bootstrap 轮播。一些我如何能够为主图像(大图像)做到这一点，但我无法解决缩略图部分的问题。

这是我正在尝试更改为 Wordpress 的 html 版本 http://codepen.io/RetinaInc/pen/rxksh

顶部现在可以工作了，所以我尝试了类似的缩略图 slider 部分的方法，但无法修复它按原样运行下面的代码会出现语法错误，因此请删除缩略图部分并将其替换为 html，然后主 slider 可以正常工作。但我希望缩略图 slider 可以使用它。

<?php get_header();?>
  <div class="container">
  <div class="content">
  <div class="row">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner ">
      <?php
          $image_args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID,
   'post_mime_type' => 'image',
   'exclude' => $current_featured_image_id,
  );
          $attachments = get_posts( $image_args );

          if ( $attachments ) {
              $i = 1;
              foreach ( $attachments as $attachment ) {?>

                <div class=
                  <?php
                    echo '"';
                    echo 'item '; 
                    if ($i == 1) {
                      echo 'active';
                    }
                    $i++;
                    echo '"';
                    ?>>
                <?php
                    echo wp_get_attachment_image( $attachment->ID, 'image' );
                    ?>
                </div>
                <?php

              }

            }  



      ?>

            </div>
        </div>

        <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">

                <?php
                $thumb_args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID,
   'post_mime_type' => 'image',
   'exclude' => $current_featured_image_id,
  );
                $thumb_attachments = get_posts( $thumb_args );
                 if ( $thumb_attachments ) {
              $i = 1;
              foreach ( $thumb_attachments as $thumbattachment ) {?>

              <?php

                }

                ?>
              <?php

                if (($count % 4) == 0) 
                    {
                ?>
                    <div class=
                    <?php
                    echo '"';
                    echo 'item '; 
                    if ($i == 1) {
                      echo 'active';
                    }
                    $i++;
                    echo '"';
                    ?>> 
                    <?php $count= 1;?>
                    <div data-target="#carousel" data-slide-to="<?php echo $count++; ?>" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>

                    <?php $count++;?>
                    </div><!-- /item -->

                <?php
                    }
                ?>


            </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> 



    <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 -->
    <div class="col-sm-6">
        <h2>Products</h2>
             <h3><?php the_title_attribute(); ?>: </h3>
        <p><?php the_content(); ?></p>


    </div> <!-- /col-sm-6 -->
            <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
  </div> <!-- /row -->
  </div>
</div> <!-- /container -->

<?php get_footer();?>

Answer 1

如果您按照 wingskush 所建议的添加另一个变量的方式以更简单的方式执行代码，您的代码将有效。

之后

$thumb_attachments = get_posts( $thumb_args );

做

if ( $thumb_attachments  ) {
$j = 1; $count = 0;

之后

foreach ( $thumb_attachments as $thumbattachment ) {?>

使用

if (($count % 4) == 0) 
 {                             
  if ($j == 1) {

           echo '<div class="item active">';
             }
             else
             {
            echo '</div><!-- /item --><div class="item">';
              }
             $j++;

      ?>

这在我尝试时有效。