HTML CSS Carousel Homepage - html

Question

Hi I am relatively new to Html and css and have recently started making and designing my own website. What I have done so far is have 4 images that are going to be part of my carousel on the websites home and made them to be the width and height of whatever screen it is on. I have an overlay over the carousel as i want to make the website content ie next/prev buttons, carousel dots and navigation bar more noticable. The carousel will allow the user to navigate to a different page on the website. I also what to have carousel dots to show the user how many slides there are but so far i have only been about to get the dot to display at the top of the screen which is not what i want as i want to eventually put my navigation bar there. I have tried to set the position of it to absolute but it only displayed the one dot when there should be four. If anyone can help me with this and explain what i am doing wrong would be great and also point me in the direction of adding different content to the carousel show i can take the user to another part of the website for example slide 1 on the carousel is a Gallery page and slide 2 on the carousel is the contact page.
I know i have asked a lot so i really appreciate you taking the time to read this and help.
Here is my HTML:
<div class="carousel-content">
<!--<div>-->
<img class="image1" src="Images/WebTest_Image.jpg">
<!--<div class="carousel-text">Caption</div>-->
<!--</div>-->
<img class="image1" src="Images/Carlingford_Fourseasons_HQ.jpg">
<img class="image1" src="Images/Flowers.jpg">
<img class="image1" src="Images/WebTest_Image3.png">
<div class="overlay" />
<a class="carousel-left" onclick="plusSlides(-1)">❮</a>
<a class="carousel-right" onclick="plusSlides(1)">❯</a>
<!--</div>-->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div>
<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("image1");
var dots = document.getElementsByClassName("dot");
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";
}
</script>
And here is my CSS:
.carousel-content {
background-position: center;
width:100%;
height:100%;
top:0;
left:0;
position: fixed;
margin:auto;
}
.overlay {
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
background: rgba(0,0,0,0.5)
}
.image1 {
display:none;
width:100%;
min-height:100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
background-position:center;
background-size:cover;
}
.carousel-nav {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
background-color: inherit;
text-align: center;
cursor:pointer;
white-space: nowrap;
background-color: transparent;
color: #fff;
font-size:xx-large;
font-weight:bold;
width: 3%;
height: auto;
}
.carousel-left {
position: absolute;
top: 50%;
left: 0%;
transform: translate(0%,-50%);
-ms-transform: translate(-0%,-50%);
color:#b2acab;
}
.carousel-right {
position: absolute;
top: 50%;
right: 0%;
transform: translate(0%,-50%);
-ms-transform: translate(0%,-50%);
color:#b2acab;
}
.dot {
display:inline-block;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
Thanks

Answer 1

You can absolute position the div so that the dots are at the bottom of the parent div.
div class="rel">
<span class="dot" onclick="currentSlide(1)"></span>
...
.rel {
position: absolute;
left: 50vw;
bottom: 0;
}

Answer 2

Simple give the parent element a class name
<div style="text-align:center" class ="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
and position it asabsolute
.dot-container{
display: block;
position: absolute;
bottom: 0px;
right: 50vh;
z-index: 99;
}
Also make sure that the carousel's main container has a relative position