6

ワードプレスにブートストラップ カルーセルを統合しました。スライドは「おすすめ」のタグが付けられた投稿から取得されるため、最近入力された「おすすめ」の投稿は 5 つだけ表示されます。

以下は私のコードです：

<div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs">
        <ol class="carousel-indicators">
          <li data-target="#carousel-captions" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-captions" data-slide-to="1" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="2" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="3" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="4" class=""></li>
        </ol>
        <div class="carousel-inner">

<?php $the_query = new WP_Query( 'tag=featured&orderby=date&posts_per_page=5' ); ?>

<?php if ( $the_query->have_posts() ) : ?>

  <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="item">
          <a href="<?php the_permalink() ?>">
            <img src="<?php the_field('header_banner', $post_id); ?>" alt="">
            <div class="carousel-caption">
              <h3><?php the_field('year', $post_id); ?></h3><span class="name">Make<br><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span><hr>
              <p><?php the_field('mileage', $post_id); ?> Miles | <?php the_field('exterior_color', $post_id); ?> Color<br><br><?php echo homepage_carousel_excerpt(15); ?></p><span class="btn btn-default">Details&nbsp;&nbsp;&nbsp;&rarr;</span>
            </div></a>
          </div>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

<?php else:  ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>


        </div>
        <a class="left carousel-control" href="#carousel-captions" data-slide="prev">
          <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-captions" data-slide="next">
          <span class="icon-next"></span>
        </a>
</div>

問題は、「アクティブな」クラスが静的に機能していないため、スライドしないことです。

これを修正するにはどうすればよいですか?

ありがとう

4

6 に答える 6

0

プラグインなしで WordPress に Bootstrap カルーセルを統合する

    <!-- Carousel items -->
    <div class="carousel-inner">
    <?php $slider = new WP_Query(array(
        'post_type' => 'slider',
        'posts_per_page'    => 1,
    )); ?>
    <?php 
    if ( have_posts() ) {
        $x=0;
        while ( $slider->have_posts() ) {
            $x++;
            $slider->the_post(); ?>
                <div class="<?php if($x==1){echo 'active'} ?> item">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <?php the_post_thumbnail(); ?>
                        </a>
                    <?php endif; ?>
                </div>
        <?php } // end while
    } // end if
    ?>


    </div>
    <!-- Carousel nav -->

     <ol class="carousel-indicators">
        <?php for($i=0; $i<$x; $i++; ) { ?>
            <li data-target="#carousel" data-slide-to="<?php echo $i;  ?>" class="<?php if($i==0){ echo 'active' }?>"></li>
        <?php } ?>
    </ol>

    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>
于 2017-06-11T18:26:26.850 に答える