Как спрятать стрелки карусели на WP?

Есть карусель постов на WordPress. Выводит посты с помощью доп. поля Взаимоотношения. Но это не так важно. Нужно чтоб когда в карусели меньше 4 постов, стрелки карусели не выводились. Я как вариант вижу поставить условие, если постов меньше 4, не отображать див jcarousel-arrows, но как это прописать не знаю. Кто сможет помочь?

Вот собственно код вывода карусели:

<div class="recomend">
<script type="text/javascript" src="/carousel/jquery.js"></script>
<script type="text/javascript" src="/carousel/jquery.jcarousel.min.js"> 
</script>
<script type="text/javascript" src="/carousel/jcarousel.responsive.js"> 
</script>
<?php 
$posts = get_field('recomend');
if( $posts ): ?><div class="product__sect-title">Рекомендуемые товары</div>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
    <?php setup_postdata($post); ?>
    <li class="carousel-item">
       <div class="product__img"><a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail(); ?></a></div>
       <div class="recomend_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                  <div class="recomend_desc"><?php the_field('excerpt', $p->ID); ?></div>
    </li>
<?php endforeach; ?></ul></div>
</div>
<div class="jcarousel-arrows">
<a href="#" class="jcarousel-control-prev" data-jcarouselcontrol="true">‹</a>
<a href="#" class="jcarousel-control-next" data-jcarouselcontrol="true">›</a>