ARTICLE AD BOX
This is the first image of the slideshow. All the help I've tried to find online only involved image slideshows, but my slideshow contains images AND boxed descriptions on top of the image. For example, this is the first slide:
To start, all the slides are hidden. Then after everything has loaded, the first slide is supposed to appear. But, it is NOT appearing. Here is the relevant code, what am I doing wrong?
const slides = document.querySelectorAll("slide);")
let slideIndex = 0;
let intervalId = null;
document.addEventListener("DOMContentLoaded", initializeSlider);
function initializeSlider(){
slides[slideIndex].classList.add("displaySlide");
}
function showSlide(index){
}
function prevSlide(){
}
function nextSlide(){
}
.slideshow-equipment{
background-color: #A3A3A3;
width: 365px;
height: 454px;
margin-left: 100px;
}
.slideshow-process{
height: 800px;
object-fit: cover;
}
.slider{
height: 800px;
position: relative;
}
.slide{
display: none;
}
.displaySlider{
display: block;
}
.box-process{
position: absolute;
width: 575px;
height: 175px;
background-color: #0D0D0D;
opacity: 100%;
left: 100px;
top: 100px;
padding: 20px;
}
.title-box-process{
font-size: 18px;
font-weight: 700;
}
<main>
<section class="slider">
<div class="slides">
<div class="slide">
<img src="images/satelite view.jpg" class="big_background slideshow-process">
<div class="box-process">
<p class="title-box-process">1. Area Selection</p>
<hr>
<p>We target areas ranging from county-sized regions to multi-county basins (up to five counties) for comprehensive analysis, ensuring sufficient geological variability for robust predictions.</p>
</div>
</div>
<div class="slide">
<img src="images/variable definition.jpg" class="big_background slideshow-process">
<div class="box-process">
<p class="title-box-process">2. Variable Definition</p>
<hr>
<p>We select an equal number of known oil wells and dry holes within the target area to establish critical training variables, balancing positive and negative data points.</p>
</div>
</div>
<div class="slide">
<img src="images/training layer.jpg" class="big_background slideshow-process">
<div class="box-process">
<p class="title-box-process">3. Training Layer Development</p>
<hr>
<p>Using Landsat9, Sentinel2, and airborne LiDAR, we create detailed training layers that capture geological and topographical features.</p>
</div>
</div>
<div class="slide">
<img src="images/data training.jpg" class="big_background slideshow-process">
<div class="box-process">
<p class="title-box-process">4. Data Training and Pattern Recognition</p>
<hr>
<p>Our machine learning models are trained to identify subtle patterns and trends indicative of subsurface oil accumulations, leveraging the predictive power of Random Forest algorithms.</p>
</div>
</div>
<div class="slide">
<img src="images/map product.jpg" class="big_background slideshow-process">
<div class="box-process">
<p class="title-box-process">5. Map Production</p>
<hr>
<p>We utilize ArcGIS Pro's “predict to raster” functionality to generate high-resolution, visually intuitive maps that highlight areas of high petroleum potential.</p>
</div>
</div>
</div>
<button class="prev" onclick="prevSlide()">❮</button>
<button class="next" onclick="nextSlide()">❯</button>
</section>
</main>
