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>

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 का उपयोग करके स्लाइडर अनाउंसमेंट बार कैसे बनाएं।

Code for slider announcement bar using HTML, CSS and JavaScript

Output

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

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

Related Post

Learn By Preet