swiper

Swiper API: Parallax

Swiper supports parallax transition effects for swiper/slides nested elements. There are two types of parallax elements supported: Direct child elements of swiper-container. Parallax effect for such elements will depend on total slider progress. Useful for parallax backgrounds Slides child elements. Parallax effect for such elements will depend on slide progress To enable parallax effects you need …

Swiper API: Parallax Read More »

Swiper API: Zoom

Swiper supports zoom images functionality (similar to what you see on iOS when browsing single photo) where you can zoom-in image by pinch gesture and or by zoom-in/out by double tap on it. In this case, additional layout is required: All “zoomable” images should be wrapped with the div with swiper-zoom-container class. Note, it doesn’t support to …

Swiper API: Zoom Read More »

Swiper API: Keyboard And Mousewheel Control

Keyboard Control Keyboard Control Parameters Parameter Type Default Description keyboard object/boolean false Enables navigation through slides using keyboard. Object with keyboard parameters or boolean true to enable with default settings. For example:var mySwiper = new Swiper(‘.swiper-container’, { keyboard: { enabled: true, onlyInViewport: false, }, });  { enabled boolean false Set to true to enable keyboard control onlyInViewport boolean true …

Swiper API: Keyboard And Mousewheel Control Read More »

Swiper API: Virtual Slides

Virtual Slides module allows to keep just required amount of slides in DOM. It is very useful in terms in performance and memory issues if you have a lot of slides, especially slides with heavyweight DOM tree or images. Note that according to Virtual Slides realization it doesn’t work with loop mode, slidesPerRow more than 1 and slidesPerView: ‘auto’ Virtual Slides Parameters …

Swiper API: Virtual Slides Read More »

Swiper API: Hash Navigation

Hash navigation is intended to have a link to specific slide that allows to load page with specific slide opened. To make it work, you need to enable it by passing hashNavigation:true parameter and adding slides hashes in data-hash attribute: Hash Navigation Parameters Parameter Type Default Description hashNavigation object/boolean   Enables hash url navigation to for slides. Object with …

Swiper API: Hash Navigation Read More »

Swiper API: History Navigation

History Navigation Parameters Parameter Type Default Description history object/boolean   Enables history push state where every slide will have its own url. In this parameter you have to specify main slides url like “slides”and specify every slide url using data-history attribute.Object with history navigation parameters or boolean true to enable with default settings. For example:var mySwiper = new Swiper(‘.swiper-container’, { …

Swiper API: History Navigation Read More »

Swiper API: Controller

Controller Parameters Parameter Type Default Description controller object/boolean   Object with controller parameters or boolean true to enable with default settings. For example:var mySwiper = new Swiper(‘.swiper-container’, { controller: { inverse: true, }, });  { control [Swiper Instance] undefined Pass here another Swiper instance or array with Swiper instances that should be controlled by this Swiper inverse …

Swiper API: Controller Read More »

Swiper API: Accessibility

Accessibility Parameters Parameter Type Default Description a11y object/boolean   Object with a11y parameters or boolean true to enable with default settings. For example:var mySwiper = new Swiper(‘.swiper-container’, { a11y: { prevSlideMessage: ‘Previous slide’, nextSlideMessage: ‘Next slide’, }, });  { enabled boolean true Enables A11y prevSlideMessage string ‘Previous slide’ Message for screen readers for previous button nextSlideMessage string …

Swiper API: Accessibility Read More »