如何制作内容滑块,例如大多数网站(Flipkart,亚马逊)上显示的热门产品滑块,在按钮点击时向左和向右滚动,类似于此图片:
我只显示了四个内容,但我想添加更多内容,我希望它可以在按钮点击时滑动。对不起,我不知道它的确切术语。
这些内容值将是动态的。
<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>
答案 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;
}
?>