Implement slider using JavaScript in HTML

fliptoyi...

SOLVED CLOSED ACTIVE ANSWERED
User: fliptoyin23
Posted: on Sep 23, 2020 11:43 PM
Forum: HTML and CSS
Replies: 2
Views: 1913
Sample Code: Download

how make slider in html

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
User: dharmendr
Replied: on Sep 23, 2020 11:45 PM
Report

Hi fliptoyin23,

What slider you want to implement?

Image slider or range slider?

Please explain in details.

dharmend...

0 2

Reply
User: dharmendr
Replied: on Sep 25, 2020 01:21 AM
Report

Hi fliptoyin23,

Check this example. Now please take its reference and correct your code.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
            font-size: 10pt;
        }

        .dvSlides {
            display: none;
        }

        img {
            vertical-align: middle;
        }

        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }

        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        @keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        @media only screen and (max-width: 300px) {
            .text {
                font-size: 11px
            }
        }
    </style>
</head>
<body>
    <div class="slideshow-container">
        <div class="dvSlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" style="width:100%; height:200px;">
            <div class="text">Image 1</div>
        </div>
        <div class="dvSlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" style="width:100%; height:200px;">
            <div class="text">Image 2</div>
        </div>
        <div class="dvSlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" style="width:100%; height:200px;">
            <div class="text">Image 3</div>
        </div>
    </div>
    <script>
        var slideIndex = 0;
        showSlides();
        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("dvSlides");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) { slideIndex = 1 }
            slides[slideIndex - 1].style.display = "block";
            setTimeout(showSlides, 2000);
        }
    </script>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Implement slider using JavaScript in HTML

Company

Explore

Follow us

Contact Us