Bootstrap 5 Carousel Gallery with Image Slider for Shopify

Overview

This dynamic carousel slider is designed for Shopify stores, offering seamless integration and customization. The carousel provides an elegant solution to display multiple images in a slider with the following features:

• Features:

  • Dynamic Image Handling: Supports multiple images with customization directly in JavaScript.

  • Auto-Rotation: Automatically slides to the next image every 3 seconds.

  • Manual Control: Users can navigate through the slider using left/right buttons.

  • Responsive Design: Images scale beautifully across all devices.

  • Easy Installation: Quickly set up the carousel using Customer Liquid.

Installation Process

1. Add a Customer Liquid Section

   • Navigate to your Shopify admin panel.

   • Go to Online Store > Themes > Customize > Add Section > Custom Liquid.

   • Drag and drop the Custom Liquid section into the desired location on your page.

2. Paste the Following Code

<div id="carousel-container" class="carousel-container">
  <button id="prev-btn" class="carousel-btn left-btn">❮</button>
  <div class="carousel-track-wrapper">
    <ul class="carousel-track"></ul>
  </div>
  <button id="next-btn" class="carousel-btn right-btn">❯</button>
</div>

<style>
.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: auto;
}

.carousel-track-wrapper {
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  list-style: none;
  padding: 0;
  margin: 0;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.left-btn {
  left: 10px;
}

.right-btn {
  right: 10px;
}

.carousel-btn:focus {
  outline: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
  // Define your images in an array
  const images = [
    {
      url: "https://via.placeholder.com/800x400?text=Slide+1",
      alt: "Slide 1",
    },
    {
      url: "https://via.placeholder.com/800x400?text=Slide+2",
      alt: "Slide 2",
    },
    {
      url: "https://via.placeholder.com/800x400?text=Slide+3",
      alt: "Slide 3",
    },
  ];

  const carouselTrack = document.querySelector(".carousel-track");
  const prevButton = document.querySelector("#prev-btn");
  const nextButton = document.querySelector("#next-btn");

  // Populate the carousel with images
  images.forEach((image) => {
    const slide = document.createElement("li");
    slide.classList.add("carousel-slide");

    const img = document.createElement("img");
    img.src = image.url;
    img.alt = image.alt;

    slide.appendChild(img);
    carouselTrack.appendChild(slide);
  });

  const slides = Array.from(carouselTrack.children);
  const slideWidth = slides[0].getBoundingClientRect().width;
  let currentIndex = 0;
  let autoSlideTimer;

  // Arrange the slides side-by-side
  slides.forEach((slide, index) => {
    slide.style.left = `${index * 100}%`;
  });

  const moveToSlide = (currentIndex, targetIndex) => {
    carouselTrack.style.transform = `translateX(-${targetIndex * 100}%)`;
    currentIndex = targetIndex;
  };

  const autoSlide = () => {
    let targetIndex = (currentIndex + 1) % slides.length;
    moveToSlide(currentIndex, targetIndex);
    currentIndex = targetIndex;
  };

  const startAutoSlide = () => {
    autoSlideTimer = setInterval(autoSlide, 3000);
  };

  const stopAutoSlide = () => {
    clearInterval(autoSlideTimer);
  };

  // Button event listeners
  prevButton.addEventListener("click", () => {
    stopAutoSlide();
    let targetIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
    moveToSlide(currentIndex, targetIndex);
    currentIndex = targetIndex;
    startAutoSlide();
  });

  nextButton.addEventListener("click", () => {
    stopAutoSlide();
    let targetIndex = (currentIndex + 1) % slides.length;
    moveToSlide(currentIndex, targetIndex);
    currentIndex = targetIndex;
    startAutoSlide();
  });

  // Start auto slide
  startAutoSlide();
});

</script>

3. Customize Your Carousel

   • Replace the placeholder images in the JavaScript images array with your actual image URLs and alt texts.

   • Adjust the slider width or styling by modifying the CSS.

Check Your Results

• Save the changes in your Shopify theme editor.

• Preview the page to ensure the carousel works as expected.

• You should see a smooth auto-rotating image slider with manual navigation options.

Why Use This Carousel?

• Lightweight and easy to integrate.

• Fully responsive design for all device sizes.

• Easily customizable via JavaScript.

• Compatible with Shopify's Liquid framework.

For any issues or customization needs, feel free to reach out to us at 📧 tentech.ai.2023@gmail.com.