✏ 编辑: horoscope-section.php
<?php
// horoscope-section.php
?>
<!-- Horoscope Section -->
<section class="horoscope-section">
  <div class="horoscope-container">
    <h2 class="horoscope-title">HOROSCOPE</h2>

    <h3 class="horoscope-subtitle">Choose Your Zodiac Sign</h3>

    <div class="horoscope-carousel-wrapper">
      <button class="carousel-arrow left" onclick="slideCarousel(-1)">‹</button>
      <div class="horoscope-carousel">
        <div class="horoscope-track" id="horoscopeTrack">
          <div class="zodiac-card" onclick="goToBasicInfo(1, 'Aries')">
            <img src="images/aries.png" alt="Aries">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(2, 'Taurus')">
            <img src="images/taurus.png" alt="Taurus">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(3, 'Gemini')">
            <img src="images/Gemini.png" alt="Gemini">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(4, 'Cancer')">
            <img src="images/cancer.png" alt="Cancer">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(5, 'Leo')">
            <img src="images/leo.png" alt="Leo">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(6, 'Virgo')">
            <img src="images/virgo.png" alt="Virgo">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(7, 'Libra')">
            <img src="images/libra.png" alt="Libra">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(8, 'Scorpio')">
            <img src="images/scorpio.png" alt="Scorpio">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(9, 'Sagittarius')">
            <img src="images/sagittarius.png" alt="Sagittarius">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(10, 'Capricorn')">
            <img src="images/capricon.png" alt="Capricorn">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(11, 'Aquarius')">
            <img src="images/Aquarius.png" alt="Aquarius">
          </div>
          <div class="zodiac-card" onclick="goToBasicInfo(12, 'Pisces')">
            <img src="images/pisces.png" alt="Pisces">
          </div>
        </div>
      </div>
      <button class="carousel-arrow right" onclick="slideCarousel(1)">›</button>
    </div>
  </div>
</section>

<style>
.zodiac-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.zodiac-card:hover {
    transform: scale(1.05);
}
</style>

<script>
// Carousel
let currentSlide = 0;
function slideCarousel(direction) {
  const track = document.getElementById('horoscopeTrack');
  const cards = document.querySelectorAll('.zodiac-card');
  if (!cards.length) return;

  const cardWidth = cards[0].offsetWidth;
  const gap = 30;
  const totalCards = cards.length;

  const containerWidth = track.parentElement.offsetWidth;
  const visibleCards = Math.floor(containerWidth / (cardWidth + gap)) || 1;
  const maxSlide = Math.max(totalCards - visibleCards, 0);

  currentSlide += direction;
  if (currentSlide < 0) currentSlide = maxSlide;
  else if (currentSlide > maxSlide) currentSlide = 0;

  const offset = currentSlide * (cardWidth + gap);
  track.style.transform = `translateX(-${offset}px)`;
}

// Auto slide every 3 seconds
setInterval(() => { slideCarousel(1); }, 3000);

// Navigate to basic info page
function goToBasicInfo(zodiacId, zodiacName) {
//   window.location.href = 'horoscope-basic-info.php?sign=' + zodiacId;
window.location.href = 'horoscope-basic-info.php?sign=' + zodiacId;

}
</script>

 [X] 取消

[X] MAKING LOT MONEY (MLM)