Childhood Memories SlideShare With Song By HTML, CSS, JavaScript
Hello guys, welcome back to my blog. In this article, I will share childhood memories image Slideshare with a song by using HTML, CSS, JavaScript. I will also share the source code, and output of this code.
If you need an article on some other topics then click on ask question and add a new question. You can also catch me @ Instagram – Chetan Shidling.
Also, read:
- Typing Speed Test Code Using HTML, CSS, JavaScript.
- Source Code For Digital Clock Using HTML, CSS, JavaScript.
- What Is Object Oriented Programming, Features Of OPPs.
Childhood Memories SlideShare
In this SlideShare, there is a total of 30 images that will recall your childhood memories. In source code is written using HTML, CSS, JavaScript. It also has one Hindi song “Wo Din” which will play in the playground. You can also share this Slideshare with your friends and family.
Here is the source code.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Chidlhood Memories</title>
</head>
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 20%;
width: auto;
padding: 16px;
margin-top: -50px;
color: red;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* By Chetan Shidling*/
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
.audio-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<h2 style="text-align:center">Childhood Memories</h2>
<p style="text-align:center"> First Play Song</p>
<br>
<div class='audio-container'>
<audio controls>
<source src="https://docs.google.com/uc?export=download&id=1_mMEMFfR0Jd_xndf8IX_4NSBq_SX7ySK">
</audio>
</div>
<script>
window.addEventListener("DOMContentLoaded", event => {
const audio = document.querySelector("audio");
audio.volume = 0.2;
audio.play();
});
</script>
<br>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 30</div>
<img src="https://i2-prod.mirror.co.uk/incoming/article8415867.ece/ALTERNATES/s1200b/Hopscotch.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 30</div>
<img src="https://img.jakpost.net/c/2018/07/12/2018_07_12_49165_1531392419._large.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 30</div>
<img src="https://www.assignmentpoint.com/wp-content/uploads/2020/04/My-Childhood-Memories.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 30</div>
<img src="https://i.redd.it/hwdggb7uoj741.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 30</div>
<img src="https://i.pinimg.com/originals/05/99/4f/05994f65e223e8d7a1d6814e89890584.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 30</div>
<img src="https://kawaipurapura.co.nz/wp-content/uploads/2016/12/Childhood-Memories-image-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">7 / 30</div>
<img src="https://4.bp.blogspot.com/-1WQFDoG2VRQ/VxYuRp0KTYI/AAAAAAAALTQ/QywoQaqccQcDd4FREtj8w8Bsa3QyR0NeACKgB/s1600/Marblesgame.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">8 / 30</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxvaeXVUbBOrytqa9l8mFUc7795QlmIMhluw&usqp=CAU" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">9 / 30</div>
<img src="https://pbs.twimg.com/media/DmYw0hGW0AA_r6y.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">10 / 30</div>
<img src="https://i1.wp.com/kidengage.com/blog/wp-content/uploads/2018/11/KidsPlaying.jpg?resize=563%2C353&ssl=1" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">11 / 30</div>
<img src="https://img.lovepik.com/photo/40025/2256.jpg_wh860.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">12 / 30</div>
<img src="https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/53/2019/04/children-building-sandcastles_280803502_507593481.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">13 / 30</div>
<img src="https://img.lovepik.com/photo/40136/2607.jpg_wh860.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">14 / 30</div>
<img src="https://r2.community.samsung.com/t5/image/serverpage/image-id/307341i9F8809FB5241062F/image-size/large?v=1.0&px=999" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">15 / 30</div>
<img src="https://r2.community.samsung.com/t5/image/serverpage/image-id/307342i2D988D056CE6CEC0/image-size/large?v=1.0&px=999" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">16 / 30</div>
<img src="https://qph.fs.quoracdn.net/main-qimg-50fa5321d5ba213561055a7da1ceaa56" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">17 / 30</div>
<img src="https://i.pinimg.com/originals/71/ae/91/71ae9161cef4fb9b1e10dfbf5f3b53b1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">18 / 30</div>
<img src="https://qph.fs.quoracdn.net/main-qimg-7f43da7334420c5acb7e9ec6a1afa288" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">19 / 30</div>
<img src="https://www.littledayout.com/wp-content/uploads/e-catscradle.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">20 / 30</div>
<img src="https://i.pinimg.com/originals/47/fd/8f/47fd8fec7a7dfe2c5a0d85a77f0f5874.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">21 / 30</div>
<img src="https://i1.wp.com/thechampatree.in/wp-content/uploads/2014/11/childhood-memories-031.jpg?ssl=1" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">22 / 30</div>
<img src="https://i.pinimg.com/originals/81/56/be/8156be8f6a97290d5299eaa8782aab69.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">23 / 30</div>
<img src="https://i2.wp.com/catchupdates.com/wp-content/uploads/2015/01/90s-born-childhood-memories-12.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">24 / 30</div>
<img src="https://d1whtlypfis84e.cloudfront.net/guides/wp-content/uploads/2019/08/06124802/Childhood-Memories.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">25 / 30</div>
<img src="https://i.pinimg.com/originals/6b/5f/df/6b5fdf2601f214238b0ef82e33694fbe.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">26 / 30</div>
<img src="https://images.indianexpress.com/2018/08/178372648-170667a.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">27 / 30</div>
<img src="https://i.pinimg.com/originals/0b/39/bb/0b39bbb720adc5b6cc13b04c3b3520a8.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">28 / 30</div>
<img src="https://www.edsys.in/wp-content/uploads/107.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">29 / 30</div>
<img src="https://s4.scoopwhoop.com/anj/image/752340881.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">30 / 30</div>
<img src="https://i.pinimg.com/originals/81/ec/83/81ec83b013ddd3870639981446fb7066.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://i2-prod.mirror.co.uk/incoming/article8415867.ece/ALTERNATES/s1200b/Hopscotch.jpg" style="width:100%" onclick="currentSlide(1)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://img.jakpost.net/c/2018/07/12/2018_07_12_49165_1531392419._large.jpg" style="width:100%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://www.assignmentpoint.com/wp-content/uploads/2020/04/My-Childhood-Memories.jpg" style="width:100%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i.redd.it/hwdggb7uoj741.jpg" style="width:100%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i.pinimg.com/originals/05/99/4f/05994f65e223e8d7a1d6814e89890584.jpg" style="width:100%" onclick="currentSlide(5)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://kawaipurapura.co.nz/wp-content/uploads/2016/12/Childhood-Memories-image-1.jpg" style="width:100%" onclick="currentSlide(6)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://4.bp.blogspot.com/-1WQFDoG2VRQ/VxYuRp0KTYI/AAAAAAAALTQ/QywoQaqccQcDd4FREtj8w8Bsa3QyR0NeACKgB/s1600/Marblesgame.jpg" style="width:100%" onclick="currentSlide(7)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxvaeXVUbBOrytqa9l8mFUc7795QlmIMhluw&usqp=CAU" style="width:100%" onclick="currentSlide(8)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://pbs.twimg.com/media/DmYw0hGW0AA_r6y.jpg" style="width:100%" onclick="currentSlide(9)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i1.wp.com/kidengage.com/blog/wp-content/uploads/2018/11/KidsPlaying.jpg?resize=563%2C353&ssl=1" style="width:100%" onclick="currentSlide(10)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://img.lovepik.com/photo/40025/2256.jpg_wh860.jpg" style="width:100%" onclick="currentSlide(11)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/53/2019/04/children-building-sandcastles_280803502_507593481.jpg" style="width:100%" onclick="currentSlide(12)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://img.lovepik.com/photo/40136/2607.jpg_wh860.jpg" style="width:100%" onclick="currentSlide(13)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://r2.community.samsung.com/t5/image/serverpage/image-id/307341i9F8809FB5241062F/image-size/large?v=1.0&px=999" style="width:100%" onclick="currentSlide(14)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://r2.community.samsung.com/t5/image/serverpage/image-id/307342i2D988D056CE6CEC0/image-size/large?v=1.0&px=999" style="width:100%" onclick="currentSlide(15)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://qph.fs.quoracdn.net/main-qimg-50fa5321d5ba213561055a7da1ceaa56" style="width:100%" onclick="currentSlide(16)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i.pinimg.com/originals/71/ae/91/71ae9161cef4fb9b1e10dfbf5f3b53b1.jpg" style="width:100%" onclick="currentSlide(17)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://qph.fs.quoracdn.net/main-qimg-7f43da7334420c5acb7e9ec6a1afa288" style="width:100%" onclick="currentSlide(18)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://www.littledayout.com/wp-content/uploads/e-catscradle.png" style="width:100%" onclick="currentSlide(19)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i.pinimg.com/originals/47/fd/8f/47fd8fec7a7dfe2c5a0d85a77f0f5874.jpg" style="width:100%" onclick="currentSlide(20)" alt="">
<div class="column">
<img class="demo cursor" src="https://i1.wp.com/thechampatree.in/wp-content/uploads/2014/11/childhood-memories-031.jpg?ssl=1" style="width:100%" onclick="currentSlide(21)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i.pinimg.com/originals/81/56/be/8156be8f6a97290d5299eaa8782aab69.jpg" style="width:100%" onclick="currentSlide(22)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i2.wp.com/catchupdates.com/wp-content/uploads/2015/01/90s-born-childhood-memories-12.jpg" style="width:100%" onclick="currentSlide(23)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://d1whtlypfis84e.cloudfront.net/guides/wp-content/uploads/2019/08/06124802/Childhood-Memories.jpg" style="width:100%" onclick="currentSlide(24)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i.pinimg.com/originals/6b/5f/df/6b5fdf2601f214238b0ef82e33694fbe.jpg" style="width:100%" onclick="currentSlide(25)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://images.indianexpress.com/2018/08/178372648-170667a.jpg" style="width:100%" onclick="currentSlide(26)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i.pinimg.com/originals/0b/39/bb/0b39bbb720adc5b6cc13b04c3b3520a8.jpg" style="width:100%" onclick="currentSlide(27)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://www.edsys.in/wp-content/uploads/107.jpg" style="width:100%" onclick="currentSlide(28)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://s4.scoopwhoop.com/anj/image/752340881.jpeg" style="width:100%" onclick="currentSlide(29)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="https://i.pinimg.com/originals/81/ec/83/81ec83b013ddd3870639981446fb7066.jpg" style="width:100%" onclick="currentSlide(30)" alt="">
</div>
</div>
</div>
<br>
<br>
</div>
<br>
<br>
<br>
<br>
<div>
<center>
<a class="footerbtn" href="whatsapp://send?text= *That sad moment when you realize your childhood is over. Touch this blue line to recall your memories and share with your friends* 👉👉👉 https://www.theviralsoon.com/"><b style="font-size: 26px;">Share on Whatsapp</b></a>
</center>
</div>
<br>
<br>
<br>
<br>
<br>
<a href="https://www.cselectricalandelectronics.com/">Created By Chetan Shidling</a>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Output of this code:
I hope this article may help you all a lot. Thank you for reading. If you have any doubts related to this article, then click on ask questions to add your question – Ask Question.
Also, read:
- 10 Steps To Prepare For Placement And Get High Salary Per Year
- App Developers, Skills, Job Profiles, Scope, Companies, Salary
- Array Operations In Data Structure And Algorithms Using C Programming
- Artificial Intelligence Scope, Companies, Salary, Roles, Jobs
- AWS Lambda, Working, Cost, Advantages, Disadvantages
- Best Engineering Branch For Future
- Blockchain Technology, History, Working, Applications, Advantages
- C Language Interview Questions On Programs With Output
- C Program On Arrays With Output For Placement Exams
- Childhood Memories SlideShare With Song By HTML, CSS, JavaScript
- Computer Science Engineers, Skills, Salary, Companies, Job profiles
- Data Analytics Jobs, Scope, Profiles, Salary details, Skills
- Data Science Work In Daily Life, What Data Science Engineers Do
- Data science, Skills, Scope, Job profiles, Salary, Companies
- Data Structure And Algorithms Using C Language Tutorial For Beginners
- Difference Between AWS, Microsoft Azure, And Google Cloud
- Difference Between CNN And RNN Architecture In Deep Learning
- Difference Between HTTP and HTTPS, In Simple Way With Example
- Difference Between Local And Global Variable, What Is A Variable
- Difference Between Machine Learning Artificial Intelligence Deep Learning
Learning Enthusiast, Engineer, Blogger.