每次切换在轮播中显示三个帖子答案

【问题标题】：Show Three Posts in a Carousel Per Toggle每次切换在轮播中显示三个帖子
【发布时间】：2017-05-29 19:45:55
【问题描述】：

我希望在一个循环中显示三个帖子，以获得光滑的轮播滑块。我想一次显示和切换三个帖子。每次切换我可以得到一个帖子，但不是三个。这是我当前的循环：

<div class="col-lg-5 col-md-4 col-sm-6">
    <h3 class="mgntop">LATEST NEWS</h3><br>
    <div class="latest_news_slider">
        <?php
        $args = array(
            'posts_per_page' => 4,
            'cat' => 4
            );
        $news_query = new WP_Query( $args );
        while ( $news_query->have_posts() ) : $news_query->the_post(); ?>
        <div>

            <div class="newswidth newsbox">
                <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>
            </div>
        </div>
        <?php  
        endwhile; 
        wp_reset_postdata(); ?>
    </div><!--latest_news_slider-->

    <div class="review_toggle">
        <span class="fa fa-chevron-left prev2"></span>
        <span class="fa fa-chevron-right next2"></span>
    </div>
</div>

这是上面代码的结果

还有 JQuery

jQuery(function($) {
    $('.latest_news_slider').slick({
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        prevArrow: $('.prev2'),
        nextArrow: $('.next2'),
        responsive: [
            {
                breakpoint: 990,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });
});

我想要的是同时显示三个结果，这样当您单击下一个箭头时，您会看到另外三个帖子堆叠在一起。

很高兴得到您的帮助

【问题讨论】：

标签： php jquery wordpress loops while-loop

【解决方案1】：

只需指定slidesToShow: 3 和slidesToScroll: 3

像这样：

$('.latest_news_slider').slick({
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3,
    prevArrow: $('.prev2'),
    nextArrow: $('.next2'),
    responsive: [
        {
            breakpoint: 990,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
    ]
});

此外，您可能希望从查询中删除 'posts_per_page' => 4 参数，因为这只会在类别的滚动条上显示 3 个帖子和 1 个。如果您只有 4 个项目，而不是 10+ imo，则有点违背滑块的目的。

【讨论】：