How to display posts from a certain category in a bootstrap 5 carousel loop with multiple items?

Question

I am a newbie developer who is still learning, and at the moment I am developing my very own first wordpress custom theme. However, I am struggling to get this working. I Have a "Hero" carousel or a landing page carousel that is currently showing posts from my custom post type. I want to add a different carousel below it which will show 4 items at the time and it is supposed to ONLY show posts from a category called "Vazno".

<div class="container cta-100 ">
        <div class="container">
            <div class="row blog">
                <div class="col-md-12">
                    <div id="blogCarousel" class="carousel slide container-blog" data-bs-ride="carousel">

                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <?php $slider = get_posts(array('post_type' => 'cars', 'posts_per_page' => 4, 'cat' => 'vazno')); ?>
                            <?php $count = 0; ?>
                            <?php foreach ($slider as $slide) : ?>
                                <?php setup_postdata($slide->ID); ?>
                                <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
                                    <div class="col-md-3">
                                        <div class="item-box-blog">
                                            <div class="item-box-blog-image">
                                                <!--Date-->
                                                <div class="item-box-blog-date bg-blue-ui white"> <span class="mon"><?php echo get_the_date('d M', $slide->ID); ?></span> </div>
                                                <!--Image-->
                                                <figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
                                            </div>
                                            <div class="item-box-blog-body">
                                                <!--Heading-->
                                                <div class="item-box-blog-heading">
                                                    <a href="<?php echo get_permalink($slide->ID); ?>" tabindex="0">
                                                        <h5><?php echo get_the_title($slide->ID); ?></h5>
                                                    </a>
                                                </div>
                                                <!--Data-->
                                                <div class="item-box-blog-data" style="padding: px 15px;">
                                                    <p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
                                                </div>
                                                <!--Text-->
                                                <div class="item-box-blog-text">
                                                    <p><?php echo wp_trim_excerpt(get_the_excerpt($slide->ID)); ?></p>
                                                </div>
                                                <div class="mt"> <a href="<?php echo get_permalink($slide->ID); ?>" tabindex="0" class="btn bg-blue-ui white read">Saznaj vise</a> </div>
                                                <!--Read More Button-->
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <?php $count++; ?>
                            <?php endforeach; ?>
                        </div>
                        <ol class="carousel-indicators">
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="0" class="active"></li>
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="1"></li>
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="2"></li>
                        </ol>
                    </div>
                  
                </div>
               
            </div>

        </div>

    </div>

This is my custom css for the carousel

.cta-100 {
margin-top: 100px;
padding-left: 8%;
padding-top: 7%;

}

.col-md-3 {
    padding-bottom: 20px;
}

.white {
    color: #fff !important;
}

.mt {
    float: left;
    margin-top: -20px;
    padding-top: 20px;
}

.bg-blue-ui {
    background-color: #708198 !important;
}

figure img {
    width: 300px;
}

#blogCarousel {
    padding-bottom: 100px;
}

.blog .carousel-indicators {
    left: 0;
    top: -50px;
    height: 50%;
}


/* The colour of the indicators */

.blog .carousel-indicators li {
    background: #708198;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.blog .carousel-indicators .active {
    background: #0fc9af;
}

.item-carousel-blog-block {
    outline: medium none;
    padding: 15px;
}

.item-box-blog {
    border: 1px solid #dadada;
    text-align: center;
    z-index: 4;
    padding: 20px;
}

.item-box-blog-image {
    position: relative;
}

.item-box-blog-image figure img {
    width: 100%;
    height: auto;
}

.item-box-blog-date {
    position: absolute;
    z-index: 5;
    padding: 4px 20px;
    top: -20px;
    right: 8px;
    background-color: #41cb52;
}

.item-box-blog-date span {
    color: #fff;
    display: block;
    text-align: center;
    line-height: 1.2;
}

.item-box-blog-date span.mon {
    font-size: 18px;
}

.item-box-blog-date span.day {
    font-size: 16px;
}

.item-box-blog-body {
    padding: 10px;
}

.item-heading-blog a h5 {
    margin: 0;
    line-height: 1;
    text-decoration: none;
    transition: color 0.3s;
}

.item-box-blog-heading a {
    text-decoration: none;
}

.item-box-blog-data p {
    font-size: 13px;
}

.item-box-blog-data p i {
    font-size: 12px;
}

.item-box-blog-text {
    max-height: 100px;
    overflow: hidden;
}

.mt-10 {
    float: left;
    margin-top: -10px;
    padding-top: 10px;
}

.btn.bg-blue-ui.white.read {
    cursor: pointer;
    padding: 4px 20px;
    float: left;
    margin-top: 10px;
}

.btn.bg-blue-ui.white.read:hover {
    box-shadow: 0px 5px 15px inset #4d5f77;
}

At the moment, this code just shows all the posts from my custom post type, only 1 at the time.

I want it to show 4 posts at the time, and I want it to slide posts by 1

Answer 1

To get only 4 posts, change your get_posts() function to this:

get_posts(array('post_type' => 'cars', 'numberposts' => 4, 'cat' => 'vazno'));

get_posts() uses numberposts instead of posts_per_page like WP_Query does.