It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 4 April 2021
Using sliders will make users like your website environment more and concepts will be transferred faster than long texts by a slider. The following code includes a responsive slider that can be used on any HTML page to display photos of the most important events or a gallery of portfolio images, etc. This slider is not automatic and moves to the next item by the buttons on the left and right of the slider.
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel='stylesheet' href='https://www.htmlbestcodes.com/files/layerjs-0.6.2.css'>
<style>
html {
height: 100%;
}
body {
height: 100%;
}
[lj-type="stage"] {
width: 100%;
height: 100%;
max-width: 800px;
margin: auto;
}
.btn-left {
float: left;
}
body {
padding: 0px;
margin: 0px;
}
#arrows {
width: 100%;
}
#arrows > div {
width: 100%;
pointer-events: none;
}
.btn-right {
float: right;
}
.btn {
background-color: rgba(128, 128, 128, 0.5);
font-size: 32px;
font-weight: bold;
text-decoration: none;
color: black;
padding: 20px;
border-radius: 50%;
width: 30px;
pointer-events: all;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
<div lj-type="stage">
<div lj-type="layer" lj-name="slider" lj-default-frame="frame1" lj-native-scroll="false">
<div lj-type="frame" lj-name="frame1" lj-fit-to="cover" lj-no-scrolling="true" lj-start-position="center" lj-neighbors.r="frame2">
<img src="https://www.htmlbestcodes.com/files/samples1a.png">
</div>
<div lj-type="frame" lj-name="frame2" lj-fit-to="cover" lj-no-scrolling="true" lj-start-position="center" lj-neighbors.l="frame1" lj-neighbors.r="frame3">
<img src="https://www.htmlbestcodes.com/files/samples1b.png">
</div>
<div lj-type="frame" lj-name="frame3" lj-fit-to="cover" lj-no-scrolling="true" lj-start-position="center" lj-neighbors.l="frame2">
<img src="https://www.htmlbestcodes.com/files/samples1c.png">
</div>
</div>
<!-- A second layer for the controls -->
<div lj-type="layer" lj-native-scroll="false" id="arrows">
<!-- The control frame. The frame will be centered in the stage. -->
<div lj-type="frame" lj-fit-to="width" lj-start-position="center" lj-no-scrolling="true">
<!-- the link will trigger the transition to the previous frame of the currently active frame in layer "slider". -->
<a class="btn-left btn" href="#slider.!left&p=right"><</a>
<a class="btn-right btn" href="#slider.!right&p=left">></a>
</div>
</div>
</div>
<script src='https://www.htmlbestcodes.com/files/layerjs-0.6.2.min.js'></script><a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!