Swiper Js
Basic Swiper
The .default-swiper class creates a basic, touch-enabled slider for smooth content transitions in Swiper.
Navigation & Pagination Swiper
The .navigation-swiper class adds navigation arrows and pagination dots to the Swiper, enabling easy slide control and tracking.
Pagination Dynamic Swiper
The .pagination-dynamic-swiper class adds dynamic pagination to Swiper, updating the visible dots as you swipe through slides.
Pagination Fraction Swiper
The .pagination-fraction-swiper class adds fraction-style pagination to Swiper, displaying the current slide number over the total number of slides.
Pagination Progress Swiper
The .pagination-progress-swiper class adds a progress bar-style pagination to Swiper, showing the current slide's progress as you navigate through the slides.
Scrollbar Swiper
The .pagination-scrollbar-swiper class adds a draggable scrollbar to Swiper, allowing users to scroll through the slides smoothly.
Vertical Swiper
The .vertical-swiper class creates a Swiper with vertical slide transitions, allowing users to swipe up and down between slides.
Mousewheel Control Swiper
The .mousewheel-control-swiper class enables Swiper control through the mousewheel, allowing users to scroll slides using their mouse.
Effect Fade Swiper
The effect-fade-swiper class creates a smooth fading transition between slides, enhancing the visual experience when navigating through the content.
Effect Creative Swiper
The effect-creative-swiper class showcases a unique slide transition effect, adding a dynamic touch as slides creatively shift into view, making your content visually engaging.
Effect Flip Swiper
The effect-flip-swiper class provides a 3D flip animation for slide transitions, creating an eye-catching visual effect as slides rotate into place, enhancing user interaction.
Zoom Effect Swiper
The zoom-effect-swiper class allows slides to zoom in and out during transitions, offering a dynamic and engaging visual experience as users navigate through the content.
Parallax Swiper
The parallax-swiper class creates a parallax scrolling effect, where the background moves at a different speed than the foreground, enhancing the depth and immersion of the swiper content.
Thumbs gallery
The .thumb-view-swiper class is used for a thumbnail gallery where small images below the main swiper allow users to select and view larger versions. The .thumbs-swiper class links the thumbnail view with the main image display, enhancing the browsing experience.