How to insert multiple products slider in php - php

Question

The following section creates a product slider from the first 6 database elements. How can I insert the next database elements(from row 6 to row 12) in a new product slider?
<section class="food" id="food">
<div class="swiper product-slider">
<div class="swiper-wrapper">
<?php
$sql = "SELECT* FROM products";
$res = mysqli_query($conn, $sql);
$counter = 0;
if(mysqli_num_rows($res) > 0){
while($row = mysqli_fetch_assoc($res)){
++$counter;
if($counter <= 6){
$id = $row['productId'];
$image = $row['productImg'];
$name = $row['productName'];
$price = $row['productPrice'];
$quantity = $row['productQuantity'];?>
<form action="food.php" method="post" class="swiper-slide box">
<img src="<?php echo $image?>" alt="">
<h3><?php echo $name?></h3>
<div class="price"> $ <?php echo $price?></div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
add to cart
</form><?php
}
}
}
?>
</div>
</div>
</section>

Answer 1

Assuming your Carousel is configured to work on the class product-slider and not on the id="food", you can place an if in your foreach loop to start a new slider after 6 elements.
Something like
++$counter;
if($counter == 7){
?>
</div>
</div>
<div class="swiper product-slider">
<div class="swiper-wrapper">
<?php
}
Furthermore, you need to change your breakpoint from 6 elements to 12. So you could just change your existing if from <=6 to <=12. However, the best practice would be instead of limiting the PHP array to limit the original SQL query.
So edit your initial query to
SELECT * FROM products LIMIT 12
Here's the complete code
<section class="food" id="food">
<div class="swiper product-slider">
<div class="swiper-wrapper">
<?php
$sql = "SELECT * FROM products LIMIT 12";
$res = mysqli_query($conn, $sql);
$counter = 0;
if(mysqli_num_rows($res) > 0){
while($row = mysqli_fetch_assoc($res)){
++$counter;
if($counter == 7){
?>
</div>
</div>
<div class="swiper product-slider">
<div class="swiper-wrapper">
<?php
}
$id = $row['productId'];
$image = $row['productImg'];
$name = $row['productName'];
$price = $row['productPrice'];
$quantity = $row['productQuantity'];?>
<form action="food.php" method="post" class="swiper-slide box">
<img src="<?php echo $image?>" alt="">
<h3><?php echo $name?></h3>
<div class="price"> $ <?php echo $price?></div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
add to cart
</form><?php
}
}
?>
</div>
</div>
</section>