Building a responsive gallery that maintains consistent proportions across all devices can be challenging, especially when mixing video and image content. In this article, I’ll walk you through creating an elegant solution using Swiper.js that maintains a 9:16 aspect ratio – perfect for vertical video content like TikTok videos or Instagram stories.
The Structure
The gallery features a clean, modern design with smooth transitions between slides. Each slide maintains a perfect 9:16 ratio (the same as vertical videos shot on mobile phones), ensuring consistency across your content types. The gallery supports both images and autoplay videos, with elegant title overlays and intuitive navigation arrows. The responsive breakpoints ensure optimal viewing on all devices – from mobile phones to large desktop screens.
Key Features
- Perfect 9:16 Aspect Ratio: Using modern CSS aspect-ratio property to maintain consistent proportions
- Mixed Content Support: Seamlessly combines videos and images in the same carousel
- Autoplay Video: Videos automatically play when visible, with appropriate muted attributes for better user experience
- Responsive Design: Displays different numbers of slides based on viewport width (2 on mobile, 3 on small tablets, 5 on tablets, and 7 on desktop)
- Hover Effects: Subtle animations enhance user interaction with slight zooming and elevation effects
- Clean Navigation: Minimalist, accessible navigation controls with proper ARIA labels
The Code
The implementation uses Swiper.js (version 11), a modern mobile touch slider, with customized styling through CSS. The key to maintaining the vertical aspect ratio is this CSS declaration:
.testgal5688 .swiper-slide {
aspect-ratio: 9/16;
/* other styling properties */
}
For the video slide, we use the standard HTML5 video attributes to ensure proper playback:
<video autoplay muted loop playsinline>
<source src="your-video.mp4" type="video/mp4">
Your browser does not support video playback.
</video>
The Swiper initialization script handles the responsive behavior:
var swiper = new Swiper(".testgal5688 .mySwiper", {
slidesPerView: 6,
spaceBetween: 15,
loop: true,
centeredSlides: false,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".testgal5688 .swiper-button-next",
prevEl: ".testgal5688 .swiper-button-prev",
},
breakpoints: {
320: { slidesPerView: 2, spaceBetween: 10 },
480: { slidesPerView: 3, spaceBetween: 10 },
768: { slidesPerView: 5, spaceBetween: 15 },
1024: { slidesPerView: 7, spaceBetween: 15 }
}
});
Implementation Notes
To prevent conflicts with other elements on your page, we’ve used a specific class namespace (testgal5688) for all gallery elements. This ensures the gallery styles won’t interfere with other components on your site.
For optimal performance:
- Images use the loading=”lazy” attribute to improve page load times
- Videos have the appropriate autoplay, muted, loop, and playsinline attributes to ensure consistent behavior across all browsers
- The gallery is wrapped in its own container for better isolation
- CSS transitions provide smooth hover effects that enhance user interaction
This gallery solution is ideal for showcasing vertical content like TikTok-style videos, Instagram stories, or portrait photography in a clean, professional presentation that works beautifully across all devices.
Key Improvements Made:
- Fixed the class name in code examples (changed from “gallxxx” to “testgal5688” to match your actual code)
- Removed the console.log() statements from code examples
- Added proper code formatting and syntax highlighting
- Included fallback text for video elements
- Added section headers with proper hierarchy
- Expanded the implementation notes with more specific details
- Fixed minor grammatical issues
- Added more information about accessibility features (ARIA labels)
- Improved the formatting of bulleted lists and features
- Added specific mentions of where this gallery would be most useful
Interested in this plugin or looking for custom solutions?
I’d love to help!
Visit my [Stay In Touch] page to connect with me and discuss your needs. There, you’ll also discover a range of services and products that might interest you, from web development solutions to specialized WordPress tools . Let’s work together to enhance your digital presence.
