"How to Create Swiper Slider For Website | Swiper Slider Tutorial Step By Step" is a comprehensive and user-friendly guide that teaches website developers and designers how to incorporate a dynamic and interactive image slider using the popular Swiper Slider library. The tutorial takes users through the step-by-step process of creating a visually appealing and responsive image carousel, enhancing the user experience on their websites.
The guide begins with an introduction to Swiper Slider, explaining its features and advantages. It then dives into the installation process, detailing how to obtain and integrate the Swiper library into web projects. The tutorial ensures compatibility with various web development frameworks, making it accessible to developers of all skill levels.
As users progress through the tutorial, they are taught how to customize the slider's appearance, behavior, and transitions, allowing them to create a unique and visually stunning image slider tailored to their website's needs. Detailed code examples and explanations accompany each step, making it easy for learners to follow along.
The tutorial emphasizes responsiveness, ensuring the slider adapts seamlessly to different screen sizes and devices. Users will learn how to optimize the slider for mobile devices, tablets, and desktops, providing an excellent user experience across all platforms.
Furthermore, the guide covers essential topics such as adding navigation controls, pagination, and autoplay functionality to the slider, enhancing its usability and user engagement. Users are also introduced to advanced features, like integrating Swiper with other JavaScript libraries or frameworks, expanding its capabilities further.
Throughout the tutorial, troubleshooting tips and common issues are addressed, helping users overcome potential challenges they may encounter during the implementation process.
By the end of this tutorial, developers and designers will have gained the knowledge and confidence to create professional-grade Swiper sliders for their websites, enriching their web projects with dynamic, eye-catching, and responsive image carousels that captivate visitors and elevate the overall user experience.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<!-- Demo styles -->
<style>
</style>
</head>
<body>
<div class="main">
<!-- Swiper -->
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper swiper-wrapper1">
<div class="swiper-slide">
<img src="img-1.jpeg" />
</div>
<div class="swiper-slide">
<img src="img-2.jpeg" />
</div>
<div class="swiper-slide">
<img src="img-3.jpeg" />
</div>
<div class="swiper-slide">
<img src="img-4.jpeg" />
</div>
<div class="swiper-slide">
<img src="img-5.jpeg" />
</div>
<div class="swiper-slide">
<img src="img-6.jpeg" />
</div>
<div class="swiper-slide">
<img src="img-7.jpeg" />
</div>
</div>
</div>
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide box1 box">
<img src="logo.png">
<h1>THE HERO CAMP</h1>
<button class="btn1">18+</button>
<button class="btn2">3 Seasons</button>
<button class="btn2">2020</button>
<img src="tab.png" class="tag">
<span class="span">#2 in Series Today</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<button class="btn3"><ion-icon name="play"></ion-icon>PLAY NOW</button>
<p style="margin-top: 20px;"><span>Starring:</span>Wagner Moura, Boyd Holbrook, Joanna</p>
<p><span>Genres:</span>Crime, Action, Thriller, Biography</p>
<p><span>This Is:</span>Violent, Forceful</p>
</div>
<div class="swiper-slide box2 box">
<img src="logo.png">
<h1>THE HERO CAMP</h1>
<button class="btn1">18+</button>
<button class="btn2">3 Seasons</button>
<button class="btn2">2020</button>
<img src="tab.png" class="tag">
<span class="span">#2 in Series Today</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<button class="btn3"><ion-icon name="play"></ion-icon>PLAY NOW</button>
<p style="margin-top: 20px;"><span>Starring:</span>Wagner Moura, Boyd Holbrook, Joanna</p>
<p><span>Genres:</span>Crime, Action, Thriller,Biography</p>
<p><span>This Is:</span>Violent, Forceful</p>
</div>
<div class="swiper-slide box3 box">
<img src="logo.png">
<h1>THE HERO CAMP</h1>
<button class="btn1">18+</button>
<button class="btn2">3 Seasons</button>
<button class="btn2">2020</button>
<img src="tab.png" class="tag">
<span class="span">#2 in Series Today</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<button class="btn3"><ion-icon name="play"></ion-icon>PLAY NOW</button>
<p style="margin-top: 20px;"><span>Starring:</span>Wagner Moura, Boyd Holbrook, Joanna</p>
<p><span>Genres:</span>Crime, Action, Thriller,Biography</p>
<p><span>This Is:</span>Violent, Forceful</p>
</div>
<div class="swiper-slide box4 box">
<img src="logo.png">
<h1>THE HERO CAMP</h1>
<button class="btn1">18+</button>
<button class="btn2">3 Seasons</button>
<button class="btn2">2020</button>
<img src="tab.png" class="tag">
<span class="span">#2 in Series Today</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<button class="btn3"><ion-icon name="play"></ion-icon>PLAY NOW</button>
<p style="margin-top: 20px;"><span>Starring:</span>Wagner Moura, Boyd Holbrook, Joanna</p>
<p><span>Genres:</span>Crime, Action, Thriller,Biography</p>
<p><span>This Is:</span>Violent, Forceful</p>
</div>
<div class="swiper-slide box5 box">
<img src="logo.png">
<h1>THE HERO CAMP</h1>
<button class="btn1">18+</button>
<button class="btn2">3 Seasons</button>
<button class="btn2">2020</button>
<img src="tab.png" class="tag">
<span class="span">#2 in Series Today</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<button class="btn3"><ion-icon name="play"></ion-icon>PLAY NOW</button>
<p style="margin-top: 20px;"><span>Starring:</span>Wagner Moura, Boyd Holbrook, Joanna</p>
<p><span>Genres:</span>Crime, Action, Thriller,Biography</p>
<p><span>This Is:</span>Violent, Forceful</p>
</div>
<div class="swiper-slide box6 box">
<img src="logo.png">
<h1>THE HERO CAMP</h1>
<button class="btn1">18+</button>
<button class="btn2">3 Seasons</button>
<button class="btn2">2020</button>
<img src="tab.png" class="tag">
<span class="span">#2 in Series Today</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<button class="btn3"><ion-icon name="play"></ion-icon>PLAY NOW</button>
<p style="margin-top: 20px;"><span>Starring:</span>Wagner Moura, Boyd Holbrook, Joanna</p>
<p><span>Genres:</span>Crime, Action, Thriller,Biography</p>
<p><span>This Is:</span>Violent, Forceful</p>
</div>
<div class="swiper-slide box7 box">
<img src="logo.png">
<h1>THE HERO CAMP</h1>
<button class="btn1">18+</button>
<button class="btn2">3 Seasons</button>
<button class="btn2">2020</button>
<img src="tab.png" class="tag">
<span class="span">#2 in Series Today</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<button class="btn3"><ion-icon name="play"></ion-icon>PLAY NOW</button>
<p style="margin-top: 20px;"><span>Starring:</span>Wagner Moura, Boyd Holbrook, Joanna</p>
<p><span>Genres:</span>Crime, Action, Thriller,Biography</p>
<p><span>This Is:</span>Violent, Forceful</p>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
loop: true,
spaceBetween: 7,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
});
var swiper2 = new Swiper(".mySwiper2", {
loop: true,
effect: "fade",
spaceBetween: 7,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
autoplay: {
delay: 2500,
disableOnInteraction: false
},
});
</script>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap');
/* font-family: 'Roboto', sans-serif; */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
transition: .5s linear;
}
.main {
width: 100%;
height: auto;
padding: 100px 2%;
background: #000;
}
.swiper {
width: 100%;
height: 100%;
cursor: pointer;
margin-top: 20px;
}
.swiper-slide {
font-size: 18px;
}
.box {
width: 100%;
height: 100%;
position: relative;
z-index: 999999;
}
.box::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
inset: 0;
/* background: rgb(0,0,0); */
background: linear-gradient(151deg, rgba(0, 0, 0, 0.865) 23%, rgba(255, 255, 255, 0) 100%);
z-index: -1;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.mySwiper2 {
height: 80%;
width: 100%;
}
.mySwiper {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.mySwiper .swiper-slide {
width: 25%;
height: 80%;
opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
opacity: 1;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.box1 {
width: 100%;
height: 100%;
padding: 100px;
background-image: url(img-1.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box2 {
width: 100%;
height: 100%;
padding: 100px;
background-image: url(img-2.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box3 {
width: 100%;
height: 100%;
padding: 100px;
background-image: url(img-3.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box4 {
width: 100%;
height: 100%;
padding: 100px;
background-image: url(img-4.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box5 {
width: 100%;
height: 100%;
padding: 100px;
background-image: url(img-5.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box6 {
width: 100%;
height: 100%;
padding: 100px;
background-image: url(img-6.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box7 {
width: 100%;
height: 100%;
padding: 100px;
background-image: url(img-7.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.swiper-slide img {
width: 200px;
z-index: 999999;
}
.swiper-slide h1 {
font-size: 90px;
text-align: left;
font-family: 'Roboto', sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url(background.jpg);
font-weight: 900;
z-index: 999999;
}
.swiper-slide .btn1 {
font-size: 30px;
color: #fff;
background: gray;
padding: 5px;
font-weight: 500;
border: none;
outline: none;
margin-right: 20px;
margin-top: 10px;
z-index: 999999;
}
.swiper-slide .btn2 {
background: transparent;
font-size: 25px;
color: #fff;
border: none;
padding: 10px;
}
.swiper-slide .tag {
width: 60px;
margin-top: 50px;
}
.swiper-slide .span {
font-family: 'Roboto', sans-serif;
color: #c8c808;
position: relative;
top: -38px;
left: 80px;
font-size: 22px;
}
.swiper-slide p {
color: #fff;
font-size: 20px;
font-family: 'Roboto', sans-serif;
padding-right: 400px;
font-weight: 400;
line-height: 25px;
}
.swiper-slide .btn3 {
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border: none;
background: #e50914;
color: #fff;
margin-top: 20px;
position: relative;
cursor: pointer;
}
.swiper-slide .btn3 ion-icon {
font-size: 20px;
padding-right: 5px;
}
.swiper-slide .btn3::before {
content: "";
width: 0%;
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #00000031;
transition: .5s;
z-index: 9999999;
}
.swiper-slide .btn3:hover::before {
width: 100%;
}
.swiper-slide p span {
color: #e50914;
font-family: 'Roboto', sans-serif;
padding-right: 10px;
}
.swiper-slide p {
margin-top: 5px;
}
.swiper-button-next,
.swiper-button-prev {
right: 10px;
padding: 30px;
color: #fff !important;
fill: #000 !important;
stroke: #000 !important;
}
Comments
Post a Comment