Edit: related_product.php

Editing: related_product.php

Kembali

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<h1 class="heading">Latest Product</h1>

<a href="category.php?category=laptop" class="swiper-slide slide">
   <img src="images/icon-1.png" alt="">
   <h3>laptop</h3>
</a>

<a href="category.php?category=camera" class="swiper-slide slide">
   <img src="images/icon-3.png" alt="">
   <h3>camera</h3>
</a>

<a href="category.php?category=mouse" class="swiper-slide slide">
   <img src="images/icon-4.png" alt="">
   <h3>mouse</h3>
</a>

<a href="category.php?category=fridge" class="swiper-slide slide">
   <img src="images/icon-5.png" alt="">
   <h3>fridge</h3>
</a>

<a href="category.php?category=washing" class="swiper-slide slide">
   <img src="images/icon-6.png" alt="">
   <h3>washing machine</h3>
</a>

<a href="category.php?category=smartphone" class="swiper-slide slide">
   <img src="images/icon-7.png" alt="">
   <h3>smartphone</h3>
</a>

<a href="category.php?category=watch" class="swiper-slide slide">
   <img src="images/icon-8.png" alt="">
   <h3>watch</h3>
</a>

</div>

</div>

</section>
</body>
<script src="js/script.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

var swiper = new Swiper(".home-slider", {
   loop:true,
   spaceBetween: 20,
   pagination: {
      el: ".swiper-pagination",
      clickable:true,
    },
});

var swiper = new Swiper(".category-slider", {
   loop:true,
   spaceBetween: 20,
   pagination: {
      el: ".swiper-pagination",
      clickable:true,
   },
   breakpoints: {
      0: {
         slidesPerView: 2,
       },
      650: {
        slidesPerView: 3,
      },
      768: {
        slidesPerView: 4,
      },
      1024: {
        slidesPerView: 5,
      },
   },
});

var swiper = new Swiper(".products-slider", {
   loop:true,
   spaceBetween: 20,
   pagination: {
      el: ".swiper-pagination",
      clickable:true,
   },
   breakpoints: {
      550: {
        slidesPerView: 2,
      },
      768: {
        slidesPerView: 2,
      },
      1024: {
        slidesPerView: 3,
      },
   },
});

</script>
</html>