javascrit와 jquery 이미지슬라이더

//javascript로 이미지 슬라이더

<div id="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

<style>
#slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

#slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#slider img.active {
  opacity: 1;
}
</style>

<script>
const slider = document.getElementById("slider");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const images = slider.getElementsByTagName("img");
let currentImageIndex = 0;

// Show the current image and hide the others
function showImage() {
  for (let i = 0; i < images.length; i++) {
    if (i === currentImageIndex) {
      images[i].classList.add("active");
    } else {
      images[i].classList.remove("active");
    }
  }
}

// Show the next image
function showNextImage() {
  currentImageIndex++;
  if (currentImageIndex >= images.length) {
    currentImageIndex = 0;
  }
  showImage();
}

// Show the previous image
function showPrevImage() {
  currentImageIndex--;
  if (currentImageIndex < 0) {
    currentImageIndex = images.length - 1;
  }
  showImage();
}

// Add event listeners to the buttons
prevBtn.addEventListener("click", showPrevImage);
nextBtn.addEventListener("click", showNextImage);

// Show the first image when the page loads
showImage();

</script>





//jquery로 이미지 슬라이더

<div id="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

<style>
#slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

#slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#slider img.active {
  opacity: 1;
}

</style>

<script>
$(document).ready(function() {
  const slider = $("#slider");
  const prevBtn = $("#prev");
  const nextBtn = $("#next");
  const images = slider.find("img");
  let currentImageIndex = 0;

  // Show the current image and hide the others
  function showImage() {
    images.removeClass("active");
    images.eq(currentImageIndex).addClass("active");
  }

  // Show the next image
  function showNextImage() {
    currentImageIndex++;
    if (currentImageIndex >= images.length) {
      currentImageIndex = 0;
    }
    showImage();
  }

  // Show the previous image
  function showPrevImage() {
    currentImageIndex--;
    if (currentImageIndex < 0) {
      currentImageIndex = images.length - 1;
    }
    showImage();
  }

  // Add event listeners to the buttons
  prevBtn.on("click", showPrevImage);
  nextBtn.on("click", showNextImage);

  // Show the first image when the page loads
  showImage();
});

<script>