<?php   
ob_start(); //এটা এবং এর ইনড-ফ্লাস না দিলে; যদি নেট গতি কম হয় তাহলে ডাটাবেজ পাবে না।

session_start();

include("configa.php");

// Start capturing the output of the category display
?>


<div style="width: 90%; height: 2in; background-color: #D5D5D5; margin-left: auto; margin-right: auto; ">
  <div class="pictureFrame">
    <img src="slide picture/fish.png" class="slideImg active">
    <img src="slide picture/seli-item.png" class="slideImg">
    <img src="slide picture/sutki.png" class="slideImg">

    <img src="slide picture/fish.png" class="slideImg active">
    <img src="slide picture/seli-item.png" class="slideImg">
    <img src="slide picture/sutki.png" class="slideImg">

    <!-- এরো বাটন -->
    <div class="arrow left" onclick="prevSlide()">&#10094;</div>
    <div class="arrow right" onclick="nextSlide()">&#10095;</div>
  </div>
</div>

<style>
.pictureFrame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pictureFrame img {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: all 1.5s ease-in-out; /* ধীরে স্লাইডিং */
}

.pictureFrame img.active {
  left: 0;
  opacity: 1;
}

/* এরো ডিজাইন */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30pt;
  color: #333;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 10pt;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  border-radius: 5pt;
  transition: background-color 0.3s;
}
.arrow:hover {
  background-color: rgba(255, 255, 255, 0.9);
}
.arrow.left {
  left: 10pt;
}
.arrow.right {
  right: 10pt;
}
</style>

<script>
  let currentIndex = 0;
  const slides = document.querySelectorAll('.slideImg');
  let autoSlideInterval;

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.remove('active');
      slide.style.left = i < index ? '-100%' : '100%';
      slide.style.opacity = 0;
    });

    slides[index].style.left = '0';
    slides[index].style.opacity = 1;
    slides[index].classList.add('active');
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
    resetAutoSlide();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
    resetAutoSlide();
  }

  function startAutoSlide() {
    autoSlideInterval = setInterval(() => {
      nextSlide();
    }, 5000); // প্রতি ৫ সেকেন্ডে
  }

  function resetAutoSlide() {
    clearInterval(autoSlideInterval);
    startAutoSlide();
  }

  document.addEventListener('DOMContentLoaded', () => {
    showSlide(currentIndex);
    startAutoSlide();
  });
</script>


<?php
// End capturing the output and store it in a variable
$slideShow = ob_get_clean();

// Now include frameForAll.php, which will use $catagory_display_content
include("index.php");

// mysqli_close($conn); // You might want to close the connection after all database operations
ob_end_flush();
?>

