Simple Responsive Slider in HTML

Written by @kerixa 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.

Code Snippet:

                                                <!-- this script is provided by coded by: Kerixa Inc. -->
<link rel='stylesheet' href=''>
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;
<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="">
    <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="">
    <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="">
  <!--  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">&lt;</a>
      <a class="btn-right btn" href="#slider.!right&p=left">&gt;</a>
<script src=''></script><a target='_blank' href='' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!



Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2