Merge pull request akshitagupta15june#718 from manasi-jain/main

Implemented dynamic background image slideshow in main section

index.js

@@ -59,4 +59,20 @@ function googleTranslateElementInit() {
   );  
 }
 
+var imageIndex = 0;
+var imagesArray = [
+    "url('./Assets/Images/main-heading-body-bg.jpg') center",
+    "url('./Assets/Images/main-heading-body-bg2.png') center",
+    "url('./Assets/Images/main-heading-body-bg3.png') center",
+    "url('./Assets/Images/main-heading-body-bg4.png') center"
+];
 
+function changeBackground() {
+    var index = imageIndex++ % imagesArray.length;
+    document.querySelector(".main-body-section-div").style.background = imagesArray[index];
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  document.querySelector(".main-body-section-div").style.background = imagesArray[0];
+  setInterval(changeBackground, 2000);
+});

introSection.css

@@ -13,12 +13,15 @@
 }
 
 /* CORRECT THE HERO IMAGE: I also changed the height to a 850px to give clearer view of the cute puppies */
-.main-body-section-div {
-  background: url("./Assets/Images/main-heading-body-bg.jpg") no-repeat center
-    center/cover;
+.main-body-section-div{
+  /* background: url("./Assets/Images/main-heading-body-bg.jpg") no-repeat center
+    center/cover; */
+  background-repeat: no-repeat!important;
+  background-size: cover!important;
   min-height: 850px;
   opacity: 0.9;
   padding-top: 80px;
+  transition: background 0.6s ease-in-out;
 }
 
 .main-body-heading-text {