Question

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

<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
        ]
    });
});

我想要的是一次显示三个结果，这样当你点击下一个箭头时，你会看到另外三个帖子堆叠在彼此之上。

我很乐意为您提供帮助

Answer 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件以上，那么Kinda会失去滑块的目的。

每次切换在旋转木马中显示三个帖子

1 个答案: