<div class="presentation">

  <div class="slide active">
    <h1>Slide 1: Introduction to Climate Change</h1>
    <p>Climate change refers to significant changes in global
    temperatures and weather patterns over time.
    While climate change is a natural phenomenon, scientific evidence
    shows that human activities are currently driving an unprecedented 
    rate of change.</p>

  </div>

  <div class="slide">
    <h1>Slide 2: Causes of Climate Change</h1>
    <ul>
      <li><strong>Greenhouse Gas Emissions:</strong> Carbon dioxide 
      (CO2) from burning fossil fuels.</li>
      <li><strong>Deforestation:</strong> Reduces the number of trees
      that can absorb CO2.</li>
      <li><strong>Industrial Processes:</strong> Emissions from
      manufacturing and chemical production.</li>
    </ul>
  </div>

  <div class="slide">
    <h1>Slide 3: Effects of Climate Change</h1>
    <ul>
      <li><strong>Rising Sea Levels:</strong> Melting ice caps and 
      glaciers contribute to higher ocean levels.</li>
      <li><strong>Extreme Weather Events:</strong> Increased frequency
      of hurricanes, droughts, and floods.</li>
      <li><strong>Impact on Biodiversity:</strong> Species extinction
      and habitat loss.</li>
    </ul>
  </div>

  <div class="slide">
    <h1>Slide 4: Solutions to Combat Climate Change</h1>
    <ul>
      <li><strong>Renewable Energy:</strong> Transitioning to solar,
      wind, and hydroelectric power.</li>
      <li><strong>Energy Efficiency:</strong> Improving energy use
      in buildings and transportation.</li>
      <li><strong>Reforestation:</strong> Planting trees to absorb
      CO2 and restore ecosystems.</li>
    </ul>
  </div>

  <div class="slide">
    <h1>Slide 5: Conclusion</h1>
    <p>Addressing climate change requires collective action from 
    individuals, businesses, and governments. By adopting sustainable
    practices and supporting policies that reduce emissions,
    we can work towards a healthier planet for future generations.</p>
  </div>

  <div class="slide">
    <h1>Slide 6: Questions?</h1>
    <p>Feel free to ask any questions or share your thoughts 
    on how we can combat climate change together!</p>
  </div>

</div>

<button class="prev" onclick="changeSlide(-1)">&#10094; Prev</button>
<button class="next" onclick="changeSlide(1)">Next &#10095;</button>


<style>
.presentation {
  position: relative;
  width: 100%;
  max-width: 800px; /* Adjust as needed */
  margin: auto;
  overflow: hidden;
}

.slide {
  display: none; /* Hide all slides by default */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #fff; /* Background color for slides */
}

.slide.active {
  display: block; /* Show the active slide */
}

button {
  margin: 10px;
  padding: 10px 20px;
  cursor: pointer;
}
</style>

<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(index) {
  // Ensure the index is within bounds
  if (index >= slides.length) {
    currentSlide = 0; // Loop back to the first slide
  } else if (index < 0) {
    currentSlide = slides.length - 1; // Loop to the last slide
  } else {
    currentSlide = index; // Set the current slide
  }

  // Hide all slides and show the current one
  slides.forEach((slide, i) => {
    slide.classList.remove('active');
    if (i === currentSlide) {
      slide.classList.add('active');
    }
  });
}

// Function to change slides
function changeSlide(direction) {
  showSlide(currentSlide + direction);
}

// Show the first slide initially
showSlide(currentSlide);
</script>