How to create slider announcement bar using HTML, CSS and JavaScript? | How to make custom announcement bar?

How to create slider announcement bar using HTML, CSS and JavaScript/ HTML, CSS और JavaScript का उपयोग करके स्लाइडर अनाउंसमेंट बार कैसे बनाएं।

It is very easy to create custom announcement bar using  HTML, CSS and JavaScript. Following are the coding which is used to create custom announcement bar.

HTML, CSS और JavaScript का उपयोग करके अनाउंसमेंट बार बनाना बहुत आसान है। निम्नलिखित कोडिंग हैं जिनका उपयोग अनाउंसमेंट बार बनाने के लिए किया जाता है।


How-to-create-slider-announcement-bar-using-HTML-CSS-JavaScript

Code for slider announcement bar using HTML, CSS and JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
        }
        .testtimonial{
            background-color: #000;
            padding:0px 80px;
            color:#AF421C;
        }
        .mySlides {
            display: none
        }

        img {
            vertical-align: middle;
        }

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

        .testtimonial p {
            color: #fff;
        }

        /* Next & previous buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* Caption text */
        .text {
            color: #F2F2F2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }
        .testtimonial .annoucement-bar-text {
            text-align: center;
            padding: 10px 60px;
            margin-bottom: 0px;
            margin-top:0px !important;
            font-family: 'Roboto Condensed';
        }

        .testtimonial .next,
        .testtimonial .prev {
            color: #AF421C;
        }
        /* Number text (1/3 etc) */
        .numbertext {
            color: #F2F2F2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        /* Fading animation */
        .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
            }
        }

        /* On smaller screens, decrease text size */
        @media(max-width:420px) {

            .testtimonial,
            .testtimonial p {
                padding: 0px 0px !important;
            }
        }

        @media(max-width:321px) {
            .test_img {
                display: none !important;
            }
        }

        @media only screen and (max-width: 300px) {

            .prev,
            .next,
            .text {
                font-size: 11px
            }
        }
    </style>
</head>

<body>
    <div class="announcement">
        <div class="announcement__wrapper">
            <div class="announcement__text">
                <div class="testtimonial">
                    <div class="slideshow-container">
                        <div class="mySlides fade">
                            <div>
                                <p class="annoucement-bar-text">Celebrate Women's Day with Us</p>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div>
                                <p class="annoucement-bar-text">Shop Now and get 15% OFF</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var slideIndex = 0;
    showSlides();
    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        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, 4000); // Change image every 2 seconds
    }
</script>

</html>

Output


 Click Here---->How to create slider announcement bar using HTML, CSS?

Click Here ----> Detail information in hindi JavaScript project to calculate student marks

Previous
Next Post »

1 comments:

Click here for comments
August 2, 2024 at 6:58 PM ×

CMOLDS ranks among the top mobile app development companies in dubai, offering innovative and customized solutions. We excel in transforming ideas into high-performing, user-friendly applications tailored to your business needs.

Congrats bro CMOLDS Mobile App Development Company in Dubai you got PERTAMAX...! hehehehe...
Reply

Please do not entering spam link in the comment box ConversionConversion EmoticonEmoticon