Railing Styles Swiper Card Grid Demo

A responsive Bootstrap 5 + Swiper demo that displays product-style cards in a clean grid layout, with an independent image slider inside each card and a fixed text area below.

Preview

This screenshot is placed near the top of the README so visitors can immediately understand the layout and interaction style of the project.

Features

• Responsive two-column layout on desktop
• Responsive single-column layout on mobile
• Each card contains its own independent Swiper instance
• Fixed text content below the slider for a more stable reading experience
• Ratio-based image area for a cleaner and more consistent card layout
• Lightweight structure that is easy to reuse in static websites or WordPress themes

Tech Stack

• HTML5
• Bootstrap 5.3.3
• Swiper 11
• Vanilla JavaScript

Project Structure

railing-styles-swiper-card-grid-demo/
├─ assets/
│  └─ railing-styles-preview.png
├─ docs/
│  └─ development-guide-zh-CN.md
├─ index.html
└─ README.md

How It Works

The page uses Bootstrap's grid system for the outer layout and creates a separate Swiper instance for each .slider element.

Layout logic

• col-12 col-md-6 makes the cards stack in one column on mobile and two columns on medium screens and above.
• Each card is divided into two parts:
  • Top: image slider
  • Bottom: title, description, and bullet points

Image ratio logic

The image area uses a ratio box with:

padding-top: calc(500 / 900 * 100%);

This keeps the visual area consistent across all cards and helps prevent uneven heights caused by different image sizes.

Swiper initialization

Each card slider is initialized independently with a loop like this:

document.querySelectorAll('#railingCards .slider').forEach(function (el) {
  new Swiper(el, {
    slidesPerView: 1,
    loop: true,
    speed: 600,
    grabCursor: true,
    pagination: {
      el: el.querySelector('.swiper-pagination'),
      clickable: true
    },
    navigation: {
      nextEl: el.querySelector('.swiper-button-next'),
      prevEl: el.querySelector('.swiper-button-prev')
    }
  });
});

This makes every card slider work independently without affecting the others.

Getting Started

1. Download the project

Clone the repository or download the ZIP file.

2. Open the demo

Open index.html directly in your browser.

3. Replace placeholder images

The current demo uses placeholder image URLs. You can replace them with your own product or project images inside index.html.

Customization Ideas

• Replace placeholder images with real product photos
• Add CTA buttons such as View Details or Request a Quote
• Convert inline CSS into a standalone stylesheet
• Split JavaScript into a separate file for easier maintenance
• Reuse the section inside a WordPress page template or theme partial

Good Use Cases

This layout works especially well for:

• Product series showcases
• Railing, decking, cladding, fencing, or material category pages
• Case study or project galleries
• Company websites that need a structured visual card section

GitHub Repository Details

Suggested repository name

railing-styles-swiper-card-grid-demo

Suggested title

Bootstrap 5 Swiper Independent Card Slider Grid Demo for Product and Railing Style Layouts

Suggested description

Responsive Bootstrap 5 and Swiper card grid demo with independent sliders in each card and a fixed content area below.

Suggested topics

bootstrap-5, swiper, responsive-layout, card-slider, frontend-demo, html, javascript, ui-component, product-grid, wordpress-friendly

Suggested website

If you plan to enable GitHub Pages later, you can use:

https://YOUR-USERNAME.github.io/railing-styles-swiper-card-grid-demo/

If the project is not deployed yet, you can leave the Website field empty for now.

Notes for WordPress Use

This demo is also suitable as a reference structure for WordPress theme development.

Typical next steps would be:

• move the section HTML into a theme template or template part
• enqueue Bootstrap and Swiper from functions.php
• replace static card content with dynamic data from posts, products, or custom fields

Included Extra Document

A Chinese development guide is included here:

• docs/development-guide-zh-CN.md

It explains the layout structure, ratio-box logic, and multi-instance Swiper setup in more detail.

---

If this project is later expanded, a good next step would be to split the single-file demo into:

• index.html
• css/style.css
• js/main.js

That structure is more suitable for long-term maintenance and GitHub collaboration.

License

This project is licensed under the MIT License.