Introduction to Swiper.js and Panorama Effects
Swiper.js is a powerful and flexible JavaScript library used for creating sliders and carousels on websites. It’s highly popular among developers due to its ease of use, customization options, and responsiveness. Whether you need a simple image slider or a complex carousel with dynamic content, Swiper.js has got you covered.
One of the standout features of Swiper.js is its ability to create visually stunning effects. Among these is the Panorama effect, which offers a unique, immersive sliding experience. The Panorama effect allows images to flow seamlessly as you swipe, creating a 3D-like effect that adds depth and elegance to your web designs.
However, it’s important to note that this effect is part of Swiper.js’s premium themes, which means it offers advanced features and customization options that aren’t available in the free version.
Try Panorama Slider:
In this blog, we will explore how to utilize the Panorama effect in your projects. We will share easy-to-follow HTML and React code snippets to help you integrate this premium Swiper.js effect into your website, elevating the user experience with minimal effort.
How To Install Swiper Js?
If you’re in a straightforward coding environment, you can easily connect to Swiper.js using the CDN method. Simply add the following code to your Head section.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>The code below provides the basic structure for creating Swiper.js sliders. You can customize your slides based on this structure. For more examples, visit the Swiper.js site and apply them to your projects.
<!-- Slider main container -->
<div class="swiper">
<!-- 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>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>Panorama Slider
Panorama Sliders offer a dynamic way to showcase wide, immersive images or content on your website, creating a visually captivating experience. This type of slider is particularly useful in categories like travel, real estate, and photography, where presenting landscapes, interiors, or panoramic views is key.
By using Swiper.js premium themes, you can easily implement Panorama Sliders that provide smooth, responsive, and engaging visuals.
The code below demonstrates how to create these sliders, allowing you to integrate stunning panoramic effects into your projects effortlessly.
Panorama Slider – HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
type="module"
crossorigin
src="https://panorama-slider.uiinitiative.com/assets/index.d2ce9dca.js"
></script>
<link
rel="modulepreload"
href="https://panorama-slider.uiinitiative.com/assets/vendor.dba6b2d2.js"
/>
<link
rel="stylesheet"
href="https://panorama-slider.uiinitiative.com/assets/index.c1d53924.css"
/>
</head>
<style>
.bg{
height: 90vh;
display: flex;
align-items: center;
background: white;
}
</style>
<body>
<div class="panorama-slider bg">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2023/07/19/12/16/car-8136751_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2023/03/22/07/52/lizard-7868932_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2023/10/19/21/08/ai-generated-8327632_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2016/05/18/10/52/buick-1400243_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2023/03/27/08/53/woman-7880177_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2019/08/08/23/33/car-4393990_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2019/09/04/02/52/forest-4450611_1280.jpg"
alt=""
/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</body>
</html>Panorama Slider – React
import React, { useEffect } from "react";
const Panorama = () => {
useEffect(() => {
// Add the external CSS link
const link = document.createElement("link");
link.rel = "stylesheet";
link.href =
"https://panorama-slider.uiinitiative.com/assets/index.c1d53924.css";
document.head.appendChild(link);
// Add the module preload link
const preloadLink = document.createElement("link");
preloadLink.rel = "modulepreload";
preloadLink.href =
"https://panorama-slider.uiinitiative.com/assets/vendor.dba6b2d2.js";
document.head.appendChild(preloadLink);
// Add the external script
const script = document.createElement("script");
script.type = "module";
script.crossOrigin = "anonymous";
script.src =
"https://panorama-slider.uiinitiative.com/assets/index.d2ce9dca.js";
document.body.appendChild(script);
// Cleanup script and links on unmount
return () => {
document.head.removeChild(link);
document.head.removeChild(preloadLink);
document.body.removeChild(script);
};
}, []);
return (
<>
<div class="panorama-slider ">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2023/07/19/12/16/car-8136751_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2023/03/22/07/52/lizard-7868932_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2023/10/19/21/08/ai-generated-8327632_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2016/05/18/10/52/buick-1400243_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2023/03/27/08/53/woman-7880177_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2019/08/08/23/33/car-4393990_1280.jpg"
alt=""
/>
</div>
<div class="swiper-slide">
<img
class="slide-image"
src="https://cdn.pixabay.com/photo/2019/09/04/02/52/forest-4450611_1280.jpg"
alt=""
/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</>
);
};
export default Panorama;
Notes: Since the Swiper.js Panorama theme is part of a paid plan, the above code snippets use custom coding with CDNs instead of relying on the Swiper.js library, which doesn’t offer this premium effect for free.
Panorama Slider in Webflow Tutorial Guide:
Ready to transform your online presence with Creative Websites? Contact Weboxy Technology, a leading Webflow and web development agency, for stunning, high-performing websites that captivate your audience!
