I made a foreach
with PHP and a .json
file to simulate a mini store inside a thumbnail in a slide , but it is not appearing properly side of the other as it should be. I wonder where I'm going wrong.
How are you currently:
PHP:
<divclass="slide-best-sallers owl-carousel">
<div class="item">
<div class="row">
<div class="col-md-12 text-center">
<div class="thumbnail">
<?php
$json_url = "products.json";
$json = file_get_contents($json_url);
$links = json_decode($json, TRUE);
?>
<?php
foreach($links['products'] as $key=>$val){
?>
<img src="<?php echo $val['imgUrl']; ?>" alt="<?php echo $val['alt']; ?>">
<div class="caption" >
<p class="description"><?php echo $val['nome']; ?></p>
<h3 class="price"><?php echo $val['preco']; ?></h3>
<p class="plots"><?php echo $val['parcelas']; ?></p>
<p class="free-shipping">Frete grátis</p>
<a href="#" class="btn btn-primary button-salle" role="button">Comprar <i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
<div class="owl-dots disabled">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
JS slide:
//Slide products
$('.slide-best-sallers').owlCarousel({
loop:true,
margin:10,
dots: true,
loop: true,
responsiveClass:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:3,
}
}
});
Json File:
{
"products": [
{
"imgUrl": "img/logo.png",
"alt": "notebook acer",
"nome" : "notebook 2 em 1 Acer - Windows 10",
"preco" : "R$999,99",
"parcelas" : "10x de R$99,00"
},
{
"imgUrl": "img/logo.png",
"alt": "notebook acer",
"nome" : "notebook 2 em 1 Acer - Windows 10",
"preco" : "R$999,99",
"parcelas" : "10x de R$99,00"
}
]
}