How can I enhance this code by turning it into a slideshow with additional images while maintaining the h1 and h2 tags within it? Here's the existing code displaying an image with titles overlayed on top:
<header class="header-image">
<div class="headline">
<div class="title">
<h1>SanDesigns</h1>
<h2>The RENDERS you are looking for</h2>
</div>
</div>
</header>
CSS:
.header-image {
display:block;
width:100%;
background:url(Matthias_Leuzinger_test_Test_exterior_BB_View01_.jpg) no-repeat;
min-height:605px;
margin-top:-1px;
}
.title {
padding-left: 15%;
padding-top:5%;
font-family:GeosansLight;
}
.title h1 {
width: 18.75%;
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
color:#FFF7F7;
}
.title h2 {
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
width:30%;
color:#FFF7F7;
}
I have another code snippet that enables slideshow functionality, although it lacks the ability to incorporate divs with h1 and h2 tags:
<nav class="navbar">
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#diseños">Diseños</a></li>
<li><a href="#articulos">Articulos</a></li>
<li><a href="#equipo">Equipo</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<header class="slideshow">
<img class="header-image" src="Architectural-Photorealistic-3D-Renders.jpg">
<img class="header-image" src="Channel-Place-Residence_LA.jpg">
<img class="header-image" src="Matthias_Leuzinger_test_Test_exterior_BB_View01_.jpg">
<img class="header-image" src="p2010018-20110510-view1-modepark.jpg">
</header>
And here's the accompanying script:
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("header-image");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 6000); // Change image every 6 seconds
}