Dynamic Responsive Carousel with API Fetching and Touch Gestures

I think this code will work.

HTML:

<div id="carousel">
  <ul id="image-list"></ul>
  <a href="#" id="prev-button">&lt;</a>
  <a href="#" id="next-button">&gt;</a>
</div>

CSS:

#carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#image-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  transition: transform 0.3s ease;
}

#image-list li {
  flex: 0 0 100%;
}

#carousel img {
  display: block;
  width: 100%;
}

#prev-button,
#next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

#prev-button {
  left: 10px;
}

#next-button {
  right: 10px;
}

JavaScript (jQuery):

$(document).ready(function() {
  var apiUrl = 'https://example.com/api/images'; // Replace with your API endpoint

  // Fetch images from the API
  $.get(apiUrl, function(response) {
    var images = response.images;

    // Iterate through the images and append them to the carousel
    $.each(images, function(index, image) {
      var li = $('
');
      $('#image-list').append(li);
    });

    // Initialize the carousel
    $('#carousel').carousel();
  });

  // Carousel functionality
  $.fn.carousel = function() {
    var carousel = $(this);
    var imageList = carousel.find('#image-list');
    var prevButton = carousel.find('#prev-button');
    var nextButton = carousel.find('#next-button');

    var currentImage = 0;
    var imageCount = imageList.find('li').length;
    var imageWidth = imageList.find('li').first().width();

    // Update carousel dimensions on window resize
    $(window).on('resize', function() {
      imageWidth = imageList.find('li').first().width();
    });

    // Navigate to the previous image
    prevButton.on('click', function(e) {
      e.preventDefault();
      currentImage = (currentImage - 1 + imageCount) % imageCount;
      moveCarousel();
    });

    // Navigate to the next image
    nextButton.on('click', function(e) {
      e.preventDefault();
      currentImage = (currentImage + 1) % imageCount;
      moveCarousel();
    });

    // Move the carousel to the current image
    function moveCarousel() {
      var position = -currentImage * imageWidth;
      imageList.css('transform', 'translateX(' + position + 'px)');
    }

    // Touch gesture support for mobile devices
    var touchStartX = 0;
    var touchEndX = 0;
    carousel.on('touchstart', function(e) {
      touchStartX = e.originalEvent.touches[0].clientX;
    });

    carousel.on('touchend', function(e) {
      touchEndX = e.originalEvent.changedTouches[0].clientX;
      handleSwipe();
    });

    function handleSwipe() {
      if (touchEndX < touchStartX) {
        // Swiped left (next image)
        currentImage = (currentImage + 1) % imageCount;
        moveCarousel();
      } else if (touchEndX > touchStartX) {
        // Swiped right (previous image)
        currentImage = (currentImage - 1 + imageCount) % imageCount;
        moveCarousel();
      }
    }

    // Lazy loading of images
    var lazyImages = imageList.find('img[data-src]');
    lazyImages.each(function() {
      var lazyImage = $(this);
      lazyImage.attr('src', lazyImage.attr('data-src'));
      lazyImage.removeAttr('data-src');
    });
  };
});

Replace the "apiUrl" variable with the appropriate API endpoint that provides the images in the desired format.