How to Create Banner Slide Using Html Code
How to write a code step by step process
Step 1: Create a folder. Folder name Project.
Step 2: Open Sublime text and Type given HTML code.
Step 3: After Completion this code, Save file name index.html (inside the Project folder)
Step 4: Open index.html with any browser like Chrome, Internet explorer, etc.
Step 5: Finally you get an output in Website Banner slide.
Note:
*Banner Image must be placed on your Device.
(For Ex: Here My background Image Name- banner.jpg, File Name: Project
<script src=“js/jquery-1.11.1.min.js”></script> * Here I’m used Jquery Coding to moving the slides one by one. If u need and test the code Click Here
Banner Slideshow Source Code
index.html
<html>
<head>
<title>Career Lines</title>
<script src=”js/jquery-1.11.1.min.js”></script>
</head>
<body>
<div class=”banner” id=”home”>
<div class=”banner-slider”>
<div class=”callbacks_container”>
<ul class=”rslides” id=”slider4″>
<li>
<div class=”banner-info”>
<h3 class=”wow slideInUp” data-wow-duration=”1s” data-wow-delay=”.3s”>Welcome</h3>
<p class=”wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.3s”>TO Career Lines</p>
<div class=”arrows wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.2s”><img src=”images/border.png” alt=”border”/></div>
<span class=”wow slideInUp” data-wow-duration=”1s” data-wow-delay=”.3s”>ARE YOU READY TO LEARN</span>
</div>
</li>
<li>
<div class=”banner-info”>
<h3 class=”wow slideInUp” data-wow-duration=”1s” data-wow-delay=”.3s”>CAREER LINES</h3>
<p class=”wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.3s”>Is the Best Place </p>
<div class=”arrows wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.2s”><img src=”images/border.png” alt=”border”/></div>
<span class=”wow slideInUp” data-wow-duration=”1s” data-wow-delay=”.3s”>To Learn Web Designing and Development</span>
</div>
</li>
<li>
<div class=”banner-info”>
<h3 class=”wow slideInUp” data-wow-duration=”1s” data-wow-delay=”.3s”>Few Courses</h3>
<p class=”wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.3s”>Graphic Design</p>
<div class=”arrows wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.2s”><img src=”images/border.png” alt=”border”/></div>
<span class=”wow slideInUpslideInLeft” data-wow-duration=”1s” data-wow-delay=”.3s”>Digital Marketing</span>
</div>
</li>
</ul>
</div>
<!–banner Slider starts Here–>
<script src=”js/responsiveslides.min.js”></script>
<script>
// You can also use “$(window).load(function() {“
$(function () {
// Slideshow 4
$(“#slider4”).responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 500,
namespace: “callbacks”,
before: function () {
$(‘.events’).append(“<li>before event fired.</li>”);
},
after: function () {
$(‘.events’).append(“<li>after event fired.</li>”);
}
});
});
</script>
<!–banner Slider starts Here–>
</div>
< ! —– Style —– >
<style type=”text/css”>
element.style {
display: block;
float: none;
position: absolute;
opacity: 0;
z-index: 1;
transition: opacity 500ms ease-in-out 0s;
}
.rslides li {
position: relative;
display: block;
float: left;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.callbacks li {
position: absolute;
width: 100%;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
html, body{
font-family: ‘Calibri’, sans-serif;
font-size: 100%;
background: black;
}
</style>
</body>
</html>
Next Blog- How to Create About us in Website step by step guidance.
For Detailed Information: Click Here