swiper

What is swiper?

The swiper npm package is a modern touch slider with hardware accelerated transitions. It is intended for use in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is designed to be used in a mobile environment, where touch interactions are fundamental. It provides a number of features like swiping, multiple slides per view, vertical slides, and more.

What are swiper's main functionalities?

Basic Swiper

This code initializes a basic Swiper instance with horizontal direction, loop mode, pagination, navigation arrows, and a scrollbar.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Multiple Slides Per View

This code sets up a Swiper instance where you can have multiple slides visible at the same time, with space between the slides and clickable pagination.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Vertical Swiper

This code snippet demonstrates how to initialize a Swiper instance that allows vertical swiping with clickable pagination.

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Other packages similar to swiper

slick-carousel

Slick is a jQuery plugin for creating carousels that supports multiple slides, responsive layouts, and touch events. It is similar to Swiper but relies on jQuery, which might not be ideal for modern projects that do not use jQuery.

glidejs

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It's lightweight, flexible and fast. Designed to slide, no less, no more. It compares to Swiper in terms of being touch-friendly and responsive, but it emphasizes simplicity and performance.

flickity

Flickity is a touch, responsive, flickable carousel library. It has features like draggable slides, group cells, and adaptive height. It is similar to Swiper but offers a different set of features and API options, focusing on being flickable and physics-based interactions.

owl-carousel

Owl Carousel is a touch-enabled jQuery plugin that lets you create a beautiful responsive carousel slider. While it offers similar functionality to Swiper, it is built on top of jQuery, which might not be suitable for projects that aim to avoid jQuery dependencies.

README

Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Getting Started

• Getting Started Guide
• API
• Demos

Changelog

10.3.0 (2023-09-21)

Bug Fixes

• core: correctly destroyor create loop on breakpoints (12a44fb), closes #6967
• core: don't call realIndexChange on initialIndex if runCallbacksOnInit is disalbed (48c4e0a), closes #6976
• core: fix slideToClickedSlide when using Element slide slots (af0519c), closes #6958
• core: fix lazy preloader in later initialized slides (e4fddc0), closes #6946
• core: fix loop on centeredSlides slide to beginning (c496835), closes #7011
• core: fix loopFix in loop and cssMode (8180a52), closes #6919
• core: fixed ignored allowSlidePrev/Next in loop mode (1b74619), closes #6987
• core: remove grid class on rows change (908becc), closes #7053
• element: correctly respond to object params assignment (2ef1ff5)
• element: do not bubble hashchange event (106a3d7), closes #6943
• element: fix issue updating with boolean module params (1cc359e), closes #6947
• navigation: fix lock class on enable (ea39c33), closes #7009
• react: add breakpointsBase param (0eb4122), closes #7014
• react: fix react components props type (1cd412e), closes #7000
• scrollbar: add 'touch-action: none' to swiper-scrollbar (#7024) (9542d09)
• virtual: fix issue with loop mode and initialSlide enabled (f4afd9d), closes #6945
• virtual: fix removing nested slides (c3321e1), closes #7005
• virtual: recalc cache on removeSlide (96e5166), closes #7020
• vue: add breakpointsBase param (6800dbb)
• zoom: fix scale origin when document is scrolled (2cf3fc2), closes #6950 #6955

Features

• core: allow createElements to process object params with {enabled: true} (abf8405)
• core: make slidesPerViewDynamic public (ae434b0), closes #7036