I'm facing an issue with my html image slider as I try to add buttons and text to the first image but it keeps getting overridden.
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="images/multipurpose.jpg">
</figure>
<figure>
<img src="images/sanitizer.jpg" alt>
</figure>
<figure>
<img src="images/glycerine.jpg" alt>
</figure>
<figure>
<img src="images/multipurpose.jpg" alt>
</figure>
<figure>
<img src="images/sanitizer.jpg" alt>
</figure>
</figure>
</div>//Looking to include text and buttons on the first image. Here's the code:
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8" alt="Clean Haven Products, Clean Haven Multipurpose Soap, Affordable Soap manufacturers in Nairobi">
<div class="hero-wrapper text-center mb-4">
<h1 class="hero-title text-white mb-4">Creating Products and Building Solutions is what
<span class="text-primary">we do.</span>
</h1>
<p class="text-white-50">We would love to tell you more about us or get in touch.</p>
<div class="mt-4">
<a href="contact.html" class="btn btn-primary mt-2 mr-2" alt="clean haven soap">Contact Us</a>
<a href="about.html" class="btn btn-success mt-2 mr-2">Learn More</a>
</div>
</div>
</div>
</div>
</div>
//Providing the CSS for my image slider below as requested by Evik:-
div#captioned-gallery {
width: 100%;
overflow: hidden;
border: 0;
padding: 0;
margin: 0;
}
figure.slider {
position: relative;
width: 500%;
height: 100%;
padding-top: 0%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: 100%;
display: inline-block;
position: relative;
}
figure.slider img {
width: 100%;
height: 100%;
}
//That's the end of the css for the image slider