javascript - 以滑块效果回显 PHP 输出

Question

我在页面上使用 for 循环和回显结果获取数据。如何以滑块效果输出结果？

我尝试了一个简单的 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 行中滑动，或者有上一个和下一个按钮在卡片之间转换

标签： javascriptphphtmlcssjoomla