How to limit articles in showing in <li> tag

Kirby 2 Solved ✅
1

I’m using uikit and I’m making a slideshow. in my controller i didn’t limit the articles so all articles are showing in frontend.

Since I’m making a slideshow i want 3 articles to be showed in the active slide and the rest of the articles will be in the dot nav.

heres my code

<div class="slideshow uk-slidenav-position" data-uk-slideshow="{autoplay:true}">
<ul class="uk-slideshow">
    <?php if($articles->count()): ?>
        <?php foreach($articles as $article): ?> 
    <li>
        <figure>
            <div class="uk-block uk-block-primary">
                <div class="blogImage">
                    <?php if($image = $article->coverimage()->toFile()): ?>
                        <img src="<?= $image->url() ?>"/>
                    <?php else : ?>
                        <em>No Image</em>
                    <?php endif ?>
                </div>
                <article class="blog-article uk-article">
                    <p class="uk-article-meta"><?php echo $article->date('F j, Y');  ?>
                        <br> by <?php echo $site->user($article->author())->firstName() ?> <?php echo $site->user($article->author())->lastName() ?></p>
                    <h2><?php echo $article->title()->html() ?></h2>
                    <?php echo $article->text()->excerpt(150) ?>
                    <div class="blog-readmore">
                        <a href="<?php echo $article->url() ?>" class="left-readmore hvr-icon-wobble-horizontal">Read More
                            <span class="uk-icon-angle-right"></span>
                        </a>
                    </div>
                </article>
            </div>

        </figure>
    </li>
                            <?php endforeach ?>
        <?php else: ?>
        <p>This blog does not contain any articles yet.</p>
        <?php endif ?>
</ul>
<ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-left">
    <li data-uk-slideshow-item="0">
        <a></a>
    </li>
    <li data-uk-slideshow-item="1">
        <a></a>
    </li>
    <li data-uk-slideshow-item="2">
        <a></a>
    </li>
    <li data-uk-slideshow-item="3">
        <a></a>
    </li>
</ul>

heres my controller

           $articles = page('blog')->children()
               ->visible()
               ->flip()
               ->sortBy('date', 'desc', 'time', 'desc');
2

Have a look at [limit](https://getkirby.com/docs/cheatsheet/pages/limit)() and [offset](https://getkirby.com/docs/cheatsheet/pages/offset)().

If that doesn’t help you, maybe you can link to the relevant UIKit docs regarding to what you are actually trying to achieve.

3

i got it working using chunk()

<ul class="uk-slideshow">
            <?php foreach($articles->chunk(3) as $article): ?>
                <li>
                    <figure>
                        <div class="uk-grid uk-grid-small">
                            <?php $no = 1; foreach($article as $articless): ?>
                                <div class="uk-width-1-3">
                                    <div class="uk-block uk-block-primary">
                                        <div class="blogImage">
                                            <?php if($image = $articless->coverimage()->toFile()): ?>
                                                <img src="<?= $image->url() ?>"/>
                                            <?php else : ?>
                                                <em>No Image</em>
                                            <?php endif ?>
                                        </div>
                                        <article class="blog-article uk-article">
                                            
                                            <p class="uk-article-meta"><?php echo $articless->date('F j, Y');  ?>
                                                <br> by <?php echo $site->user($articless->author())->firstName() ?> <?php echo $site->user($articless->author())->lastName() ?></p>
                                            <h2><?php echo $articless->title() ?></h2>
                                            <?php echo $articless->text()->excerpt(150) ?>
                                            <div class="blog-readmore">
                                                <a href="<?php echo $articless->url() ?>" class="left-readmore hvr-icon-wobble-horizontal">Read More
                                                    <span class="uk-icon-angle-right"></span>
                                                </a>
                                            </div>
                                        </article>
                                    </div>
                                </div>
                            <?php endforeach ?>
                        </div>
                    </figure>
                </li>
            <?php endforeach ?>
            </ul>