如何制作包含动态内容的图片滑块

时间:2016-12-13 05:46:37

标签: javascript php jquery html css

如何制作内容滑块,例如大多数网站(Flipkart,亚马逊)上显示的热门产品滑块,在按钮点击时向左和向右滚动,类似于此图片:

image 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>

1 个答案:

答案 0 :(得分:0)

这叫做轮播。

您可以使用名为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;
    }

?>