Эхо PHP вывод в виде слайдера

Question

Я извлекаю данные, используя для результатов цикла и эха на странице.Как вывести результаты в виде эффекта слайдера?

Я пробовал простой слайдер CSS, но не могу получить ожидаемый результат.В итоге я получаю все, что выводится на странице, и не имеет скользящего эффекта.

Часть моего PHP-кода, отражающая вывод ...

for ($i=0, $n=count($rows); $i < $n; $i++) {
    //echo "<tr><td>".
    ($row = $rows[$i]);
    //."</td></tr>";
    $link_detail = JRoute::_('index.php?option=com_jblance&view=user&layout=viewprofile&id='.$row->user_id.$Itemid); 
    $link_invite = JRoute::_('index.php?option=com_jblance&view=project&layout=invitetoproject&id='.$row->user_id.'&tmpl=component');
    ?>

        <div class="slider">
            <div class="media style_prevu_kit">
                <div class="center">
                    <?php 
                    if($show_logo){
                    $link = LinkHelper::GetProfileLink($row->user_id, $row->$nameOrUsername);
                    $attrib = 'style="width: 162px; height: 162px; float:center; margin: 0 auto; border-radius: 100px"';
                    //echo JblanceHelper::getLogo($row->user_id, $attrib);
                    echo "<a href='".$link_detail."' class='link'>".JblanceHelper::getLogo($row->user_id, $attrib)."</a>";
                    //echo $link_detail;
                    } ?>
                </div>
                <div class="media-body">
                    <h5><?php //$username = LinkHelper::GetProfileLink($row->user_id, $row->$nameOrUsername);
                    $getUsername = $row->$nameOrUsername;
                    $nameorUsername = truncate($getUsername, 5);
                    echo LinkHelper::GetProfileLink($row->user_id, $nameorUsername);
                    //echo truncate($username, 15);
                    ?></h5>
                    <?php //<?php echo JblanceHelper::getCategoryNames($row->id_category, 'tags-link', 'user'); ?>
                    </span>
                    <br /><br />

                </div>
                <div class="center">
                        <a href="<?php echo $link_invite; ?>" class="jb-modal" rel="{handler: 'iframe', size: {x: 650, y: 400}}"><input type="button" value="Hire Me" class="button_add button_curved_blue color-a"></a>
                </div>
                <div class="lineseparator"></div>
                <div class="container">
                    <div class="content">
                      <div class="grid-2">
                        <button class="color-b circule"> <i class="fab fa-dribbble fa-2x"></i></button>
                        <h6 class="title-2">12.3k</h6>
                        <p class="followers">Followers</p>
                      </div>
                      <div class="grid-2">
                        <button class="color-c circule"><i class="fab fa-behance fa-2x"></i></button>
                        <h6 class="title-2">16k</h6>
                        <p class="followers">Followers</p>
                      </div>
                      <div class="grid-2">
                        <button class="color-d circule"><i class="fab fa-github-alt fa-2x"></i></button>
                        <h6 class="title-2">17.8k</h6>
                        <p class="followers">Followers</p>
                      </div>
                    </div>
                  </div>    
            </div>
        </div>

<?php

}

Очень простой слайдер CSS ...

.slider {
    white-space: nowrap;
    oveflow:hidden;
}
.slider>div {
    white-space: normal; /* reset "nowrap" above */
    display: inline-block;
    transition: margin-left 0.8s cubic-bezier(0.5, 0.1, 0.5, 1.25);
    /* the above transition gives a neat little "bounce-back" effect */
}

И 1 строка JavaScript ...

<script>
    theSlider.children[0].style.marginLeft = (-100*pageID)+"%";
</script>

Теперь я получаю вот это ...

В то время как мне нужно, чтобы все 8 карт автоматически скользили в 1 ряд или чтобы у них была предыдущая и следующая кнопки для перехода между картами