Image Gallery Carousel with Swiper.js Integration

Enhance your website's visual appeal with a dynamic image gallery carousel powered by Swiper.js. Learn how to integrate SwiperJs to create a captivating carousel that showcases your images beautifully

Enhance your website's image gallery with a dynamic Image Gallery Carousel using Swiper.js, HTML, CSS, and JavaScript. This tutorial will walk you through copying the code snippet, linking the necessary CSS, and customizing the carousel to suit your needs.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML, CSS, and JavaScript code snippet for the Image Gallery Carousel. Select the code, click the copy button, and paste it into your project files.

Step 2: Link CSS

  • Ensure you link the Swiper CSS file in your HTML document. Add the following <link> tag in the <head> section to include the Swiper styles: 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<link rel="stylesheet" href="styles.css"> <!-- Your custom CSS file -->

Step 3: Add JavaScript

  • Include the Swiper JavaScript file at the end of your HTML document, just before the closing </body> tag: 
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="script.js"></script> <!-- Your custom JavaScript file -->

Step 4: Customize and Make it Yours

  • Personalize the Image Gallery Carousel to match your website's design. Adjust the CSS styles and JavaScript settings to modify slide effects, navigation controls, pagination, and other features. Experiment with different transition effects, autoplay options, and responsive layouts to create an engaging user experience.

By following these steps, you can integrate and customize an Image Gallery Carousel with Swiper.js on your website using HTML, CSS, and JavaScript. Tailor the carousel to fit your website's aesthetics and create a visually appealing gallery for your users.

Code Explanation

HTML Code

Main Container (<div class="gallery">):
  • Acts as the main container for the entire gallery.
Main Swiper Slider (<div class="swiper gallery-cards">):
  • This div initializes a Swiper slider for displaying main gallery images.
  • It contains a .swiper-wrapper div that wraps individual slides (<div class="swiper-slide">).
Individual Slides (<div class="swiper-slide">):
  • Each .swiper-slide represents a single item in the gallery.
  • Inside each slide, there's an <article class="gallery__card"> which holds:
    • An <img> element (<img class="gallery__img">) displaying the image.
    • A <div class="gallery__data"> containing:
    • <h3 class="gallery__title">: Title of the item (e.g., "Shoes", "Lotion").
    • <span class="gallery__subtitle">: Subtitle or description of the item (e.g., "Feet", "Face").
Thumbnails Swiper (<div class="swiper gallery-thumbs">):
  • This section contains thumbnails for navigation.
  • It uses another Swiper instance (gallery-thumbs) for displaying thumbnails (<div class="swiper-slide">) of the main gallery images.
  • Each thumbnail is represented by an <img> element (<img class="gallery__thumbnail-img">).
Swiper Pagination (<div class="swiper-pagination"></div>):
  • Pagination bullets (<div class="swiper-pagination"></div>) for navigating through slides.
  • These bullets are automatically generated by Swiper and are clickable to navigate directly to specific slides.
Navigation Buttons (<div class="swiper-button-next">, <div class="swiper-button-prev">):
  • Navigation arrows (<div class="swiper-button-next">, <div class="swiper-button-prev">) to manually navigate through slides.
  • Uses icons (<i class="ri-arrow-right-line"></i>, <i class="ri-arrow-left-line"></i>) for indicating direction.

CSS Code

Global Settings and Variables:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
:root {
  --first-color: hsl(30, 16%, 50%);
  --text-color: #fff;
  --text-color-black: hsl(30, 8%, 15%);
  --body-color: hsl(30, 100%, 98%);
  --body-font: "Poppins", sans-serif;
  --h3-font-size: 1rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;
}
  • Imports the Poppins font from Google Fonts.
  • Sets up root variables for colors, text styles, and font families.
Global Reset and Body Styles:
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: var(--body-font);
  background-color: var(--body-color);
}
  • Resets box model and removes default padding/margin.
  • Applies Poppins font to the entire document.
  • Sets the background color for the body.
Gallery Container Styles:
.gallery {
  height: 100vh;
  display: grid;
  align-content: center;
  justify-content: center;
}
  • Defines the gallery container to occupy full viewport height (100vh).
  • Uses a grid layout to center its content both vertically and horizontally.
Card and Image Styles:
.gallery__card {
  position: relative;
  width: 208px;
  height: 268px;
  border-radius: 3rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.gallery__img {
  inset: 0;
  margin: auto;
  transition: transform 0.3s;
}
  • Styles each card in the gallery with specific dimensions and styling.
  • Applies rounded corners (border-radius) and ensures it's centered.
  • Defines how images (gallery__img) behave within their containers, with auto margins and a smooth transform transition effect.
Typography and Text Styling:
.gallery__title,
.gallery__subtitle {
  color: var(--text-color);
  font-weight: 500;
}
.gallery__title {
  font-size: var(--h3-font-size);
}
.gallery__subtitle {
  font-size: var(--smaller-font-size);
}
  • Sets text color and font weights.
  • Uses CSS variables for font sizes, adjusting based on media queries.
Responsive Design with Media Queries:
@media screen and (min-width: 1024px) {
  /* Styles for screens wider than 1024px */
  :root {
    --h3-font-size: 1.125rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
  .gallery__card {
    width: 220px;
    height: 290px;
  }
  .gallery__thumbnail {
    width: 65px;
    height: 65px;
  }
  .gallery-cards,
  .gallery-thumbs {
    width: 280px;
  }
}
@media screen and (max-width: 320px) {
  /* Styles for screens narrower than 320px */
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}
  • Adjusts CSS variables for typography and dimensions for larger screens (min-width: 1024px).
  • Hides navigation buttons (swiper-button-next, swiper-button-prev) on screens narrower than 320px.
Swiper Specific Styles:
.swiper-slide-active .gallery__thumbnail {
  transform: translateY(-1.25rem) scale(1.2);
}
  • Applies specific styles for the active slide in the Swiper gallery.

JavaScript Code

Swiper Instance for Gallery Cards (swiperCards):
let swiperCards = new Swiper(".gallery-cards", {
  loop: true,
  loopedSlides: 5,
  cssMode: true,
  effect: "fade",
});
  • loop: Enables looping through slides.
  • loopedSlides: Specifies the number of slides to loop.
  • cssMode: Enables CSS Scroll Snap and disables JavaScript-based navigation.
  • effect: Specifies the transition effect (fade in this case) between slides.
Swiper Instance for Thumbnails (swiperThumbs):
let swiperThumbs = new Swiper(".gallery-thumbs", {
  loop: true,
  loopedSlides: 5,
  slidesPerView: 3,
  centeredSlides: true,
  slideToClickedSlide: true,
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});
  • loop: Enables looping through thumbnails.
  • loopedSlides: Specifies the number of thumbnails to loop.
  • slidesPerView: Defines how many thumbnails are visible at once.
  • centeredSlides: Centers the currently active thumbnail.
  • slideToClickedSlide: Automatically slides to the clicked thumbnail.
  • pagination: Configures pagination with a fractional type (showing current and total slides).
  • navigation: Adds navigation buttons for the next and previous slides.
Synchronization Between Swipers:
swiperThumbs.controller.control = swiperCards;
  • controller.control: Sets swiperThumbs as a controller for swiperCards, meaning swiperThumbs will control the navigation of swiperCards.