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 https://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">&lt;</a>
      <a class="btn-right btn" href="#slider.!right&p=left">&gt;</a>
    </div>
  </div>
</div>
<script src='https://www.htmlbestcodes.com/files/layerjs-0.6.2.min.js'></script><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

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!

Comments

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

0 / 300