Installation of Swiper.js
Method 1: Using CDN
You can get started using Swiper.js fastest with a Content Delivery Network (CDN) and without requiring any build tools or package managers-
Include Swiper.js CSS in head tag-
<link rel="stylesheet" href="https://www.w3wiki.nethttps://unpkg.com/swiper/swiper-bundle.min.css">
Include Swiper.js JavaScript:
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Method 2: Using npm
A popular package manager for JavaScript, npm, lets you include Swiper.js in your projects as a dependency.
Install Swiper.js: Install Swiper.js using the following command-
npm install swiper
Import Swiper.js in Your JavaScript: Import Swiper.js and its CSS in your JavaScript file.
import Swiper from 'swiper/bundle';
import 'swiper/swiper-bundle.css';
// Initialize Swiper
const swiper = new Swiper('.swiper-container', {
// Swiper options
});
Example: In the given below example will see the basic usage of Swiper.js.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Infinity Swiper Effect Using Swiper.js</title>
<link rel="stylesheet" href="
https://unpkg.com/swiper/swiper-bundle.min.css" />
<style type="text/css">
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
}
.swiper-slide img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src=
"https://media.w3wiki.org/wp-content/uploads/20240605120007/GFG-logo.jpg" />
</div>
<div class="swiper-slide">
<img
src=
"https://media.w3wiki.org/wp-content/uploads/20240606102206/Transport-of-Carbon-Dioxide-in-the-Blood.png" />
</div>
<div class="swiper-slide">
<img
src=
"https://media.w3wiki.org/wp-content/uploads/20240606103259/Use-Cases-of-Computer-Vision-in-Manufacturing.webp" />
</div>
<div class="swiper-slide">
<img
src=
"https://media.w3wiki.org/wp-content/uploads/20240606102721/How-To-Make-Your-Friends-Hear-Your-Music-On-Discord.webp" />
</div>
<div class="swiper-slide">
<img
src=
"https://media.w3wiki.org/wp-content/uploads/20240606102908/Best-Portfolio-Websites.webp" />
</div>
<div class="swiper-slide">
<img
src=
"https://media.w3wiki.org/wp-content/uploads/20240606091054/mass_flow_hypothesis_50.webp" />
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
let swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 10,
stretch: 10,
depth: 200,
modifier: 1,
slideShadows: true,
},
loop: true,
});
</script>
</body>
</html>
Output: