Carousel slider tutorial using swiper js
Tutorial by Mirko Zovko | 26. Jul. 2020.
How to use swiper js as your carousel slider.
In the last tutorial I showed you how to create a very simple slider with basic functions using only vanilla js. In this article I’ll show you how to use swiper js for your slider.
Swiper js slider library is currently one of the most powerful on the web that I know. It’s free, lightweight, mobile responsive, touch slider with many other features that you can use, and overall it’s very easy to use.
Some of best features are:
- Library Agnostic - it doesn't require any other library but can be safely used with other libraries
- Touch movement - touch movement interaction
- Mutation Observer - automatically reinitialized and recalculate all required parameters if you make dynamic changes
- Rich API - many features, including pagination, navigation button, parallax and much more
- Multi Row Slides Layout
- Full Navigation Control - build in navigation elements like pagination, navigation arrows and scrollbar
- Flexbox Layout - using modern flexbox layout
- Images Lazy Loading - feature that makes your page load much faster
- And many other features..
Installation of swiper js
There is a few different ways how to use swiper js:
- Download library directly to your site from https://unpkg.com/swiper/
Use CDN links
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
There is also CDN version for ES modules
<script type="module"> import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js' const swiper = new Swiper(...) </script>
Install from NPM
Html layout structure of swiper js
Html structure is very strait forward and basically elements that you don't want to use just don't add it. For example if you don't want to use pagination then you just won't add that part of html code.
This is basic HTML structure of swiper js:
CSS for Swiper js
To make it all work, only thing you have add to css for your swiper js is container size. For example:
You can also change style for other elements of the swiper js. Just make sure to write override style under the main swiper css. For example you can change style of swiper navigation buttons, prev - next button.
Initialize swiper js
To run everything you also need to initialize swiper. and as you can see from code you can add different class for some part of the swiper like navigation, pagination, scrollbar etc..
For more information and feature of the swiper js you can visit ther site swiperjs.com
I hope you liked this article. If you have some suggestion or idea feel free to write in comment section bellow. Enjoy! :)