Question

我想在一个循环中显示三个帖子，所以我可以使用轮播滑块。通过这种方式，我可以在循环中包裹所有三个帖子，因此我的轮播滑块可以将它们视为项目。我该怎么做？这是我目前的循环：

   <div class="col-lg-5 col-md-4 col-sm-6">
    <h3 class="mgntop">LATEST NEWS</h3><br>
    <div id="owl-demo" class="owl-carousel owl-theme">
        <?php
            $newsposts = get_posts('cat=4&posts_per_page=3');
            foreach($newsposts as $post) :
            setup_postdata($post);
        ?>
            <div class="newswidth newsbox item">
                <h6><a href="<?php the_permalink(); ?>">
                        <?php
                        the_title();
                        ?>
                    </a></h6>
                <div class="boxelements">
                    <span class="fa fa-calendar"> </span>
                    <?php the_time(); ?>
                </div>
                <p>
                    <?php the_excerpt() ?>
                </p>
                <a href="<?php the_permalink(); ?>">
                    <div class="more-btn">read more</div>
                </a>
                <span class="fa fa-comments cmnt"> <?php comments_number('0','1','%'); ?></span>
            </div>
            <?php endforeach; ?>
    </div>
</div>

这是我的JQuery

jQuery(document).ready(function($) {

$("#owl-demo").owlCarousel({

  navigation : true, // Show next and prev buttons
  slideSpeed : 300,
  paginationSpeed : 400,

   items : 1,
  // itemsDesktop : false,
  // itemsDesktopSmall : false,
  // itemsTablet: false,
  // itemsMobile : false

}）;

感谢您的期待！

Answer 1

你试试这个

<script>
$(function(){
    $("#oul-demo").owlCarousel({
          loop: true,
          item: 3,
   });
});
</script>

Answer 2

你只需要循环滑动帖子并将casoural项目放在while循环中

<?php
$args = array(
        'post_type' => 'slide',
        'posts_per_page' => -1,

);
$slide = new WP_Query( $args );?><?php if ( $slide->have_posts() ):?>
<div id="maddy-slider" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <?php $j=0; ?>
        <?php while ( $slide->have_posts() ) : $slide->the_post();?>
            <?php $img = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                <?php if($j==0): ?>
                    <div class="item active">
                        <img src="<?php echo $img; ?>" alt="<?php echo get_the_title(); ?>">
                        <div class="carousel-caption">
                            <!-- // content -->
                        </div>
                    </div>
                <?php else: ?>
                    <div class="item">
                        <img src="<?php echo $img; ?>" alt="<?php echo get_the_title(); ?>">
                        <div class="carousel-caption">
                            <!-- // content -->
                        </div>
                    </div>

                <?php endif; ?>
            <?php $j++; ?>
        <?php endwhile; ?>

    </div>
    <a class="left carousel-control" href="#maddy-slider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#maddy-slider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

使用foreach循环，您可以尝试

<?php
$args = array(
        'post_type' => 'slide',
        'posts_per_page' => -1,

);
$slide = new WP_Query( $args );?><?php if ( $slide->have_posts() ):?>
<div id="maddy-slider" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <?php $j=0; ?>
        <?php foreach ($posts as $post):
            <?php $img = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                <?php if($j==0): ?>
                    <div class="item active">
                        <img src="<?php echo $img; ?>" alt="<?php echo get_the_title(); ?>">
                        <div class="carousel-caption">
                            <!-- // content -->
                        </div>
                    </div>
                <?php else: ?>
                    <div class="item">
                        <img src="<?php echo $img; ?>" alt="<?php echo get_the_title(); ?>">
                        <div class="carousel-caption">
                            <!-- // content -->
                        </div>
                    </div>

                <?php endif; ?>
            <?php $j++; ?>
        <?php the_post();endforeach;?>

    </div>
    <a class="left carousel-control" href="#maddy-slider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#maddy-slider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

Answer 3

您可以尝试使用此代码来解决您的问题：

<div class="col-lg-5 col-md-4 col-sm-6">
        <h3 class="mgntop">LATEST NEWS</h3><br>

        <div id="owl-demo" class="owl-carousel owl-theme">

        <?php

            $pcount=1;
            $newsposts = get_posts('cat=4&posts_per_page=3');

            foreach($newsposts as $post) :
            setup_postdata($post);
        ?>
                      <?php if($pcount%3 ==1)
                                  {?>
                                <div class="newswidth newsbox item">
                               <?php } ?>


                    <h6><a href="<?php the_permalink(); ?>">
                        <?php
                        the_title();
                        ?>
                    </a></h6>

                <div class="boxelements">
                    <span class="fa fa-calendar"> </span> <?php the_time(); ?>
                </div>
                <p> <?php the_excerpt() ?></p>

                <a href="<?php the_permalink(); ?>"><div class="more-btn">read more</div></a>
                <span class="fa fa-comments cmnt"> <?php comments_number('0','1','%'); ?></span>

            <?php if($pcount%3==0)
                                 { ?>
                </div>

                <?php } ?>
        <?php  $pcount++;

endforeach; ?>

        </div>

    </div>

在旋转滑块的一个循环中显示3个帖子

3 个答案: