In this video, I'm going to show you how to use Full-Screen Image Slider on your own website by jishaansinghal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background-image: linear-gradient(to right, #e809d7, #ff0082, #ff6a2a, #fab500, #a8eb12); border-radius: 10px; left: 0; top: 0; }
</style>
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
scrollbar: {
el: ".swiper-scrollbar",
hide: true,
},
});
</script>
</body>
</html>
key words:
full screen image slider
full screen image slider codepen
full screen image slider with html css & js
full screen image slider android github
full screen image slider android
full screen image slider elementor
full screen image slider css
full screen image slider divi
full screen automatic image slider background
angular image slider full screen
fullscreen image slider bootstrap
full screen background image slider
carousel-item slider-full screen-image
full screen slideshow html
image size for full screen slider
how to fix image size in slider
full screen image slider html
full screen image slider with html css
ionic image slider full screen
full screen image slider jquery
fullscreen image slider js
fullscreen slideshow
image slider with full screen option
jquery image slider with full screen option
full screen image slider plugin wordpress
full screen slider image resolution
full screen responsive image slider
revolution slider full screen image size
slider revolution full screen image
full screen slider image size
simple full screen image slider
full screen image slider w3schools
full screen image slideshow wordpress
wordpress full screen image slider
ionic 4 image slider full screen
Comments
Post a Comment