Introduction to Premium Swiper JS Travel Slider
In today’s digital-first world, presenting your travel offerings in a visually engaging way is crucial. A Premium Swiper JS Travel Slider can be the perfect solution! This slider lets you showcase breathtaking destinations, stunning hotel photos, and travel itineraries in an interactive, smooth-scrolling format that grabs users’ attention immediately.
In this blog, we’ll dive into what makes Swiper JS an exceptional choice for travel websites and how you can create a travel slider from scratch. We’ll also include HTML and React snippets to get you started.
Why Use a Swiper Slider for Travel Websites?
Travel is all about visuals. The right slider lets potential travelers see themselves on that sandy beach or in a cozy mountain cabin. Here’s how the Premium Swiper JS Travel Slider benefits the travel industry:
- Enhances Visual Storytelling: With Swiper JS, you can add captivating transitions, enabling visitors to explore destinations in a way that feels natural and immersive.
- Boosts Engagement and Time on Page: Travel sites that include an interactive element like a slider see users engaging longer. This can boost conversion rates as travelers stay to browse your offerings.
- Optimized for All Devices: Swiper JS is highly responsive, ensuring that your slider looks beautiful on mobile, tablet, and desktop—crucial for today’s travelers who browse on-the-go.
- Easy to Customize: Swiper’s extensive customization options allow you to add personalized effects that make your site stand out. For travel brands, adding branded colors, custom transitions, or even autoplay features can elevate the user experience.
Try Premium Swiper Js Travel Slider with the button below:
Creating Your Premium Swiper JS Travel Slider
Let’s walk through the steps to create a Swiper travel slider with HTML and React code. This tutorial will give you a head start in integrating a slider that brings out the best of your travel content.
Premium Swiper Js Travel Slider – HTML Code
<!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://travel-slider.uiinitiative.com/assets/index.72ad9ffa.js"></script>
<link rel="modulepreload" href="https://travel-slider.uiinitiative.com/assets/vendor.78b3a2bd.js" />
<link rel="stylesheet" href="https://travel-slider.uiinitiative.com/assets/index.3763fc0e.css" />
</head>
<body>
<div id="app">
<div class="travel-slider">
<!-- Rotating Planet -->
<div class="travel-slider-planet">
<img src="https://travel-slider.uiinitiative.com/images/earth.svg" />
<div class="travel-slider-cities travel-slider-cities-8">
<img src="https://travel-slider.uiinitiative.com/images/usa.svg" />
<img src="https://travel-slider.uiinitiative.com/images/england.svg" />
<img src="https://travel-slider.uiinitiative.com/images/france.svg" />
<img src="https://travel-slider.uiinitiative.com/images/italy.svg" />
<img src="https://travel-slider.uiinitiative.com/images/russia.svg" />
<img src="https://travel-slider.uiinitiative.com/images/egypt.svg" />
<img src="https://travel-slider.uiinitiative.com/images/india.svg" />
<img src="https://travel-slider.uiinitiative.com/images/japan.svg" />
</div>
</div>
<!-- Swiper -->
<div class="swiper swiper-initialized swiper-horizontal swiper-watch-progress swiper-backface-hidden">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active">
<img src="https://travel-slider.uiinitiative.com/images/usa.jpg" class="travel-slider-bg-image" />
<div class="travel-slider-content">
<div class="travel-slider-title">United States</div>
<div class="travel-slider-subtitle">8,295 properties</div>
</div>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-next">
<img src="https://travel-slider.uiinitiative.com/images/england.jpg" class="travel-slider-bg-image" />
<div class="travel-slider-content">
<div class="travel-slider-title">England</div>
<div class="travel-slider-subtitle">1,110 properties</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://travel-slider.uiinitiative.com/images/france.jpg" class="travel-slider-bg-image" />
<div class="travel-slider-content">
<div class="travel-slider-title">France</div>
<div class="travel-slider-subtitle">314 properties</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://travel-slider.uiinitiative.com/images/italy.jpg" class="travel-slider-bg-image" />
<div class="travel-slider-content">
<div class="travel-slider-title">Italy</div>
<div class="travel-slider-subtitle">1,200 properties</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://travel-slider.uiinitiative.com/images/russia.jpg" class="travel-slider-bg-image" />
<div class="travel-slider-content">
<div class="travel-slider-title">Russia</div>
<div class="travel-slider-subtitle">12,231 properties</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://travel-slider.uiinitiative.com/images/egypt.jpg" class="travel-slider-bg-image" />
<div class="travel-slider-content">
<div class="travel-slider-title">Egypt</div>
<div class="travel-slider-subtitle">505 properties</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://travel-slider.uiinitiative.com/images/india.jpg" class="travel-slider-bg-image" />
<div class="travel-slider-content">
<div class="travel-slider-title">India</div>
<div class="travel-slider-subtitle">2,300 properties</div>
</div>
</div>
<div class="swiper-slide">
<img src="https://travel-slider.uiinitiative.com/images/japan.jpg" class="travel-slider-bg-image" />
<div class="travel-slider-content">
<div class="travel-slider-title">Japan</div>
<div class="travel-slider-subtitle">1,700 properties</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Premium Swiper Js Travel Slider – React Component
import React, { useEffect } from "react";
const Travel = () => {
useEffect(() => {
// Add the external CSS link
const link = document.createElement("link");
link.rel = "stylesheet";
link.href =
"https://travel-slider.uiinitiative.com/assets/index.3763fc0e.css";
document.head.appendChild(link);
// Add the module preload link
const preloadLink = document.createElement("link");
preloadLink.rel = "modulepreload";
preloadLink.href =
"https://travel-slider.uiinitiative.com/assets/vendor.78b3a2bd.js";
document.head.appendChild(preloadLink);
// Add the external script
const script = document.createElement("script");
script.type = "module";
script.crossOrigin = "anonymous";
script.src =
"https://travel-slider.uiinitiative.com/assets/index.72ad9ffa.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 id="app" className="w-full !h-screen " style={{ boxSizing: 'content-box' }}>
{/* Travel slider */}
<div className="travel-slider">
{/* Rotating Planet */}
<div
className="travel-slider-planet"
style={{ transform: "translate(-50%, -50%) rotate(0deg)", transitionDuration: "0ms" }}
>
<img src="https://travel-slider.uiinitiative.com/images/earth.svg" alt="Earth" />
<div className="travel-slider-cities travel-slider-cities-8">
<img src="https://travel-slider.uiinitiative.com/images/usa.svg" alt="USA" />
<img src="https://travel-slider.uiinitiative.com/images/england.svg" alt="England" />
<img src="https://travel-slider.uiinitiative.com/images/france.svg" alt="France" />
<img src="https://travel-slider.uiinitiative.com/images/italy.svg" alt="Italy" />
<img src="https://travel-slider.uiinitiative.com/images/russia.svg" alt="Russia" />
<img src="https://travel-slider.uiinitiative.com/images/egypt.svg" alt="Egypt" />
<img src="https://travel-slider.uiinitiative.com/images/india.svg" alt="India" />
<img src="https://travel-slider.uiinitiative.com/images/japan.svg" alt="Japan" />
</div>
</div>
{/* Swiper */}
<div className="swiper " style={{overflow:"visible",}}>
<div
className="swiper-wrapper h-full"
style={{
cursor: "grab",
transitionDuration: "0ms",
transform: "translate3d(192px, 0px, 0px)",
transitionDelay: "0ms",
height:"300px",
zIndex:"99999",
marginLeft: "30px",
overflow:"none"
}}
>
<div className="swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active mr-[64px] " style={{height:"300px",zIndex:"9999"}} >
<img src="https://travel-slider.uiinitiative.com/images/usa.jpg" className="travel-slider-bg-image h-96" alt="USA" />
<div className="travel-slider-content">
<div className="travel-slider-title">United States</div>
<div className="travel-slider-subtitle">8,295 properties</div>
</div>
</div>
<div className="swiper-slide swiper-slide-visible swiper-slide-next" style={{ marginRight: "64px" }}>
<img src="https://travel-slider.uiinitiative.com/images/england.jpg" className="travel-slider-bg-image" alt="England" />
<div className="travel-slider-content">
<div className="travel-slider-title">England</div>
<div className="travel-slider-subtitle">1,110 properties</div>
</div>
</div>
<div className="swiper-slide" style={{ marginRight: "64px" }}>
<img src="https://travel-slider.uiinitiative.com/images/france.jpg" className="travel-slider-bg-image" alt="France" />
<div className="travel-slider-content">
<div className="travel-slider-title">France</div>
<div className="travel-slider-subtitle">314 properties</div>
</div>
</div>
<div className="swiper-slide" style={{ marginRight: "64px" }}>
<img src="https://travel-slider.uiinitiative.com/images/italy.jpg" className="travel-slider-bg-image" alt="Italy" />
<div className="travel-slider-content">
<div className="travel-slider-title">Italy</div>
<div className="travel-slider-subtitle">1,200 properties</div>
</div>
</div>
<div className="swiper-slide" style={{ marginRight: "64px" }}>
<img src="https://travel-slider.uiinitiative.com/images/russia.jpg" className="travel-slider-bg-image" alt="Russia" />
<div className="travel-slider-content">
<div className="travel-slider-title">Russia</div>
<div className="travel-slider-subtitle">12,231 properties</div>
</div>
</div>
<div className="swiper-slide" style={{ marginRight: "64px" }}>
<img src="https://travel-slider.uiinitiative.com/images/egypt.jpg" className="travel-slider-bg-image" alt="Egypt" />
<div className="travel-slider-content">
<div className="travel-slider-title">Egypt</div>
<div className="travel-slider-subtitle">505 properties</div>
</div>
</div>
<div className="swiper-slide" style={{ marginRight: "64px" }}>
<img src="https://travel-slider.uiinitiative.com/images/india.jpg" className="travel-slider-bg-image" alt="India" />
<div className="travel-slider-content">
<div className="travel-slider-title">India</div>
<div className="travel-slider-subtitle">2,300 properties</div>
</div>
</div>
<div className="swiper-slide" style={{ marginRight: "64px" }}>
<img src="https://travel-slider.uiinitiative.com/images/japan.jpg" className="travel-slider-bg-image" alt="Japan" />
<div className="travel-slider-content">
<div className="travel-slider-title">Japan</div>
<div className="travel-slider-subtitle">1,700 properties</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Travel;Note: The Premium Swiper JS Travel Slider above are implemented using custom coding and external CDNs, rather than relying solely on the Swiper.js library. While Swiper.js provides many free features, certain premium effects are available only in its paid plans. To help you recreate similar effects without additional costs, the provided code snippets use custom solutions, enabling similar functionality without relying on Swiper.js premium features.
If you’re looking to create more visually striking sliders for free, don’t forget to explore our Sliders Categories. Simply click the bold text to uncover its features and see how it can enhance your project.
