https://github.com/coowinit/bootstrap-swiper-card-gallery-modal
A responsive card gallery page built with Bootstrap v5 and Swiper.js, featuring per-card sliders, a large detail modal, localized assets, and a structure ready for WordPress integration.
https://github.com/coowinit/bootstrap-swiper-card-gallery-modal
bootstrap bootstrap5 card-gallery css frontend gallery html javascript modal portfolio-template responsive-design swiper ui-design wordpress wordpress-theme
Last synced: about 2 months ago
JSON representation
A responsive card gallery page built with Bootstrap v5 and Swiper.js, featuring per-card sliders, a large detail modal, localized assets, and a structure ready for WordPress integration.
- Host: GitHub
- URL: https://github.com/coowinit/bootstrap-swiper-card-gallery-modal
- Owner: coowinit
- Created: 2026-04-12T04:19:23.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-12T04:31:03.000Z (4 months ago)
- Last Synced: 2026-04-12T06:20:33.789Z (4 months ago)
- Topics: bootstrap, bootstrap5, card-gallery, css, frontend, gallery, html, javascript, modal, portfolio-template, responsive-design, swiper, ui-design, wordpress, wordpress-theme
- Language: JavaScript
- Homepage: https://coowinit.github.io/bootstrap-swiper-card-gallery-modal/
- Size: 525 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bootstrap Swiper Card Gallery with Modal Detail
A clean, responsive HTML gallery page built with **Bootstrap v5** and **Swiper.js**.
This project uses a **card grid + image slider + detail modal** pattern that works well for portfolios, brand campaigns, editorial content, lookbooks, case studies, and visual showcase pages.
---
## Demo Overview
This page includes:
- Responsive card grid layout
- 3-column desktop layout / 1-column mobile layout
- Per-card Swiper slider support
- Click-to-open detail modal
- Large modal image viewer with thumbnails
- Load More interaction
- Localized CSS / JS assets
- Local image folder structure for quick replacement
---
## Tech Stack
- **HTML5**
- **CSS3**
- **JavaScript (Vanilla JS)**
- **Bootstrap v5**
- **Swiper.js**
---
## Features
- Clean card-based gallery UI
- Supports both **single-image** and **multi-image** cards
- Card image area can directly open the detail modal
- Slider arrows are hidden by default and only appear on image hover
- Pagination dots and navigation arrows do not accidentally trigger the modal
- Desktop modal uses a more controlled presentation size for better visual balance
- Large modal images use `object-fit: contain` to better handle non-uniform image proportions
- Grid images use `object-fit: cover` to keep the card layout neat and consistent
- Button text is centered with CSS for more stable alignment
- Split file structure for easier maintenance and later framework / CMS integration
---
## Project Structure
```bash
.
├── index.html
├── assets/
│ ├── css/
│ │ ├── bootstrap.min.css
│ │ ├── swiper-bundle.min.css
│ │ └── style.css
│ └── js/
│ ├── bootstrap.bundle.min.js
│ ├── swiper-bundle.min.js
│ └── main.js
└── images/
├── pic01.png
├── pic02.png
├── pic03.png
├── pic04.png
├── pic05.png
├── pic06.png
├── pic07.png
├── pic08.png
└── pic09.png
```
---
## Screenshots
The following screenshots show the gallery list layout and the detail modal view.
### List Page
### Detail Modal
---
## How to Use
1. Download or clone the repository.
2. Keep the folder structure unchanged.
3. Replace the demo images inside the `images/` folder with your own files.
4. Keep the filenames in this format:
```bash
pic01.png
pic02.png
...
pic09.png
```
5. Open `index.html` in your browser.
---
## Data Customization
The card content is currently defined in:
```js
assets/js/main.js
```
You can update:
- category
- title
- lead text
- author
- date
- button link
- image array
- detail content
This makes the page easy to adapt for:
- portfolio entries
- case study listings
- campaign pages
- editorial features
- product storytelling pages
- lookbook / gallery pages
---
## Recommended Use Cases
This layout is especially suitable for:
- Brand campaign showcase pages
- Portfolio / studio presentation pages
- Editorial article previews
- Case study listing pages
- Visual storytelling landing pages
- Lookbook or collection presentation pages
- Image-driven content archives
---
## WordPress Integration Notes
This project can be used as a front-end prototype before integrating into a WordPress theme or custom template.
### Recommended integration approach
- Convert `index.html` into a WordPress template file or template part
- Move static content from `main.js` into PHP-generated data
- Output card data dynamically from:
- custom post types
- posts
- ACF fields
- WooCommerce products
- custom queries
- Enqueue CSS and JS properly with `wp_enqueue_style()` and `wp_enqueue_script()`
- Replace static image paths with dynamic theme or upload URLs
### Important notes when integrating into WordPress
#### 1. Avoid duplicate library loading
If your theme already loads Bootstrap or Swiper, do not load them again.
#### 2. Do not hardcode production data in JavaScript
The current demo data is fine for static preview, but in WordPress it is better to:
- output JSON from PHP
- localize script data
- or render the card markup directly in PHP
#### 3. Replace local image paths
The current demo uses:
```bash
images/pic01.png
```
In WordPress, replace these with dynamic URLs such as:
- theme directory assets
- featured image URLs
- gallery field URLs
- media library images
#### 4. Keep modal structure reusable
Use one shared modal container and dynamically inject the corresponding content, rather than outputting one modal per card.
#### 5. Test content with mixed image proportions
This layout is already optimized for inconsistent image sizes, but real project data should still be tested with:
- landscape images
- portrait images
- square images
- long titles
- short titles
- longer detail text
### Good WordPress use scenarios
- custom post type archive + modal detail
- WooCommerce lookbook or inspiration page
- campaign landing page with modal detail view
- featured stories block on homepage
- brand case study listing template
---
## Performance Notes
For real project use, consider:
- compressing images before upload
- generating multiple image sizes
- lazy loading where appropriate
- limiting the initial card batch
- using CDN or optimized media delivery in production
---
## Future Improvements
Possible next steps:
- category filtering
- search function
- AJAX or API-based data loading
- WordPress dynamic rendering
- JSON data source
- light/dark style presets
- animation fine-tuning
- accessibility improvements
---
## License
This project is open source and available for personal and commercial use.
You may modify, adapt, and reuse it in your own projects. Attribution is appreciated but not required.
---
## Author Notes
This project was built as a clean, presentation-focused front-end gallery prototype with an emphasis on:
- controlled visual rhythm
- polished modal interaction
- flexible image handling
- future WordPress integration readiness