How To Create Full Page Slider Using HTML CSS and JavaScript
Learn How To Make Full Page Slider Using HTML, CSS, And Javascript. Easy Way To Create Full Page Slider In HTML, CSS, And Javascript.
In This Tutorial, You Will Learn How To Create This Awesome And Easy Full Page Slider Using HTML, Javascript, And CSS. This Slider Is Full Responsive And Easy To Understand For Users. If You Want To Create, Follow These Steps Which I Given Below.
How To Create Full Page Slider Using HTML CSS and JavaScript
- 0 - 1.00min Intro
- 1.00 - 7.0min How To Create Full Page Slider Using HTML CSS and JavaScript
In This Video Tutorial, I Will Teach You How To Make a Full Page Slider In HTML JavaScript And CSS. It Is Very Easy To Make This Full Page Slider in HTML And CSS. In the First 40s, I Will Show You The Slider Design, Which I Will Create In This Tutorial. After I Will Create HTML, CSS, And Javascript Files And Put This Files In The Project Folder. After I Linked The CSS And Js File With HTML Using "Link" And "Script" Tags. After Linking The Files, I will Make Structure Of The Full Page Slider Using HTML And Design This Structure Using CSS Style Sheet. I Hope You Like This Tutorial.
1) Open Your Text Editor Like Notepad++, Sublime, etc.
2) Create HTML, CSS, And Javascript Files And Put This Files In Your Project Folder Which You Create. I Recommended You To Create Separate Folders For CSS And JavaScript Files.
3) Link The CSS File With HTML File Using "Link" Tag.
4) Link The Js File With HTML Using "Script" Tag.
5) Copy Slider HTML Code Which I Given Below And Past In Your HTML File.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <title>Full Page Slider</title> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/> <link rel="stylesheet" href="css/style.css"/> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide slider-1"></div> <div class="swiper-slide slider-2"></div> <div class="swiper-slide slider-3"></div> <div class="swiper-slide slider-4"></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <script type="text/javascript" src="js/swiper.min.js"></script> <!-- Initialize Swiper --> </body> </html>
6) Copy Slider CSS Code Which I Given Below And Past In Your CSS File.
CSS
@charset "utf-8";
/* CSS Document */
/*-- Demo styles --*/
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-container {
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{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
.slider-1{
background-image:url("../images/1.jpg");
}
.slider-2{
background-image:url("../images/2.png");
}
.slider-3{
background-image:url("../images/3.jpg");
}
.slider-4{
background-image:url("../images/4.png");
}
.swiper-button-next,
.swiper-button-prev{
height: 20px;
margin: auto 20px;
}
7) Copy Slider Js Code Which I Given Below And Past In Your JS File.
JS
var swiper = new Swiper('.swiper-container', {
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
8) Download The Full Page Slider Source Code, Link Given Below.
9) After Doing All Steps, Open HTML File(Index.html) And Enjoy This Awesome Full page Slider Which We Create Using HTML And CSS.
The Download Links Will Be Shown in 30 Seconds
Comments