javascript - 如何制作具有动态内容的图像 slider

Question

如何制作一个内容 slider ，就像大多数网站(Flipkart、Amazon)上显示的流行产品 slider 一样，它在单击按钮时左右滚动，类似于此图片:

我只显示了四个内容，但我想添加更多内容，并且我希望它在单击按钮时滑动。抱歉，我不知道它的确切术语。

这些内容值是动态的。

<div class="dialog">
            <div class="shop_img">
                <img src="../image/shops/1.jpg">
            </div>
            <hr id="hr">
            <div class="shop_name">
                <?php echo $name;?>
            </div>
            <a href="detail.php?add=<?php echo $add_id;?>"><div class="address">
                <span id="1">ADDRESS</span><span id="2"><i class="fa fa-arrow-right" aria-hidden="true"></i></i></span>
            </div></a>
        </div>

Answer 1

这称为轮播。

您可以从此处使用名为 owl carousel 的 javascript 插件 http://www.owlcarousel.owlgraphic.com/来达到这个效果。

您可以使用 php foreach 循环在轮播容器内动态生成轮播元素，如下所示:

<?php
    foreach ($items as $key => $item) {
        ob_start();
        ?>
        <div class="dialog">
            <div class="shop_img">
                <img src="../image/shops/<?php echo $item->imageName;?>">
            </div>
            <hr id="hr">
            <div class="shop_name">
                <?php echo $item->name;?>
            </div>
            <a href="detail.php?add=<?php echo $item->id;?>"><div class="address">
                <span id="1">ADDRESS</span><span id="2"><i class="fa fa-arrow-right" aria-hidden="true"></i></i></span>
            </div></a>
        </div>
<?php
        $itemHtml = ob_get_clean();
        print $itemHtml;
    }

?>