Swiper: How To Implement Tinder-Like Swiping on Mobile Browsers

Swiper is a modern mobile touch slider with hardware accelerated transitions

Indrek Lasn
Dec 13, 2019 · 3 min read
Swiping with swiper

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

Note: Swiper is not compatible with all platforms, it is a modern touch slider that is focused only on modern apps/platforms to bring the best experience and simplicity. Make sure you use the latest browser version to smooth out this process.

Why Swiper? —Source: https://swiperjs.com/

Getting started

We can install Swiper with npm or include it via a CDN.

npm

npm install swiper

Use Swiper from CDN

If you don’t want to install Swiper via the npm, you may use it from a CDN, like so:

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"><script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

Swiper API

<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
</div>

Initialize Swiper

Now, when we have Swiper’s HTML, we need to initialize it using the following function:

new Swiper(swiperContainer, parameters) - initialize Swiper with options.

  • swiperContainerHTMLElement or string (with CSS selector) of Swiper container HTML element. Required.
  • parameters — object — object with Swiper parameters. Optional.
  • The method returns the initialized Swiper instance.

Example

import Swiper from 'swiper'const mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});

After you initialize Swiper, it is possible to access Swiper’s instance on its HTMLElement. It is the swiper property of Swiper's HTML container element:

const mySwiper = document.querySelector('.swiper-container').swiper// use slider methods like
mySwiper.slideNext();

Events

Swiper comes with a bunch of useful events you can listen to. Events can be assigned in two ways:

  1. Using the on parameter on swiper initialization:
const mySwiper = new Swiper('.swiper-container', {  
// ...
on: {
init: function () {
console.log('swiper initialized');
}
},
};

2. Using the on method after Swiper initialization.

const mySwiper = new Swiper('.swiper-container', {   
// ...
};
mySwiper.on('slideChange', function () {
console.log('slide changed');
});

Note: The this keyword within the event handler always points to the Swiper instance.


What Next?

As you see, it is really easy to integrate Swiper into your website or app. So, here are your next steps:

  • Go to the API documentation to learn more about the Swiper API and how to control it.
  • Look at available demos.
  • If you have questions about Swiper, ask them in Stack Overflow and don’t forget to tag your question with the swiper tag.
  • Create an issue on GitHub if you’ve found a bug.

Conclusion

If you’re new to JavaScript and want to learn the language, I recommend starting with reading books combined with building things. Start with the “A Smarter Way to Learn JavaScript” book and here’s a list of fun apps to build.

Thanks for reading, I hope you learned something new. Remember, as developers, we constantly have to be open and welcome new tools and libraries that make our lives easier.

Better Programming

Advice for programmers.

Indrek Lasn

Written by

JS, Swift, C++ Indie Dev. Oh, and startups. Connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade