childhood Memories
All PostsHTML & CSSProgrammingSource CodeWeb Development

Childhood Memories SlideShare With Song By HTML, CSS, JavaScript

Posted on by Chetan Shidling

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:

  1. Typing Speed Test Code Using HTML, CSS, JavaScript.
  2. Source Code For Digital Clock Using HTML, CSS, JavaScript.
  3. 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:

About The Author

Chetan Shidling

Automotive | Technical Blogger | Engineer | Content Creator

See author's posts

Share Now