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://indiakeproducts.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:
- 100+ C Programming Projects With Source Code, Coding Projects Ideas
- 1000+ Interview Questions On Java, Java Interview Questions, Freshers
- App Developers, Skills, Job Profiles, Scope, Companies, Salary
- Applications Of Artificial Intelligence (AI) In Renewable Energy
- Applications Of Artificial Intelligence, AI Applications, What Is AI
- Applications Of Data Structures And Algorithms In The Real World
- Array Operations In Data Structure And Algorithms Using C Programming
- Artificial Intelligence Scope, Companies, Salary, Roles, Jobs
- AWS Lambda, Working, Cost, Advantages, Disadvantages
- AWS Technical Interview Questions, Top 200+ AWS Questions
- Battery Management Systems Using Artificial Intelligence
- Best Engineering Branch For Future
- Best Programming Languages For Electrical and Electronics Engineers
- Big Data, Evolution Of Big Data, Benefits Of Big Data, Opportunities
- Bit Operation In C Programming With Example & Applications
- Blockchain Projects For Computer Science Engineers
- Blockchain Technology, History, Working, Applications, Advantages
- Brain Computer Interfaces Technology, Beyond AI, ML, IoT, Blockchain
- C Language Interview Questions On Programs With Output
- C Program On Arrays With Output For Placement Exams
Author Profile
- Chetu
- Interest's ~ Engineering | Entrepreneurship | Politics | History | Travelling | Content Writing | Technology | Cooking
Latest entries
All PostsApril 19, 2024What Is Vector CANoe Tool, Why It Is Used In The Automotive Industry- All PostsApril 13, 2024What Is TCM, Transmission Control Module, Working, Purpose,
- All PostsApril 12, 2024Top 100 HiL hardware in loop Interview Questions With Answers For Engineers
- All PostsMarch 22, 2024Driver Monitoring Systems In Vehicles, Working, Driver Sleepy Alert
