I'm attempting to create a slide show with an overlapping caption that appears when hovering over the container or image. The image needs to fit exactly inside the container so no scroll bar is shown and the border radius is correct. I managed to achieve this, but there's a bug. When the page loads initially, there is flickering and sometimes the scroll bar appears, or vice versa. Is there a way to fix this issue?
https://i.stack.imgur.com/aggyt.jpg
https://i.stack.imgur.com/fRa3q.jpg
https://i.stack.imgur.com/uumKD.jpg
I have tested in both Chrome and Firefox, and they exhibit the same incorrect behavior.
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
} else if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
#header {
background-color: #202020;
height: 120px;
overflow: auto;
}
body {
background-color: #f5f5f5;
}
.navbar li {
display: inline;
margin-left: 50px;
}
.navbar {
font-family: "Roboto Thin";
font-size: 20pt;
color: white;
list-style-type: none;
padding-top: 48px;
margin-left: 400px;
}
#login {
font-size: 14pt;
color: white;
float: right;
padding-top: 57px;
padding-right: 35px;
}
#login li {
display: inline;
margin-left: 10px;
}
.titulo {
font-family: "Roboto Light";
font-size: 45pt;
}
img#mds-modern {
float: left;
padding-top: 15px;
height: 100px;
}
img#mds-logo {
float: left;
height: 120px;
}
div.body {
padding-top: 20px;
}
.carousel-container {
max-width: 773px;
max-height: 509px;
border-radius: 10px;
position: relative;
margin: auto;
overflow: auto;
}
.slide {
display: none;
}
.slide img {
width: 100%;
height: 100%;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.caption {
height: 50px;
color: rgba(242, 242, 242, 0);
font-size: 20pt;
font-family: "Roboto Thin";
padding-top: 12.5px;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
}
.carousel-container:hover .caption {
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(25, 25, 25, 0.8));
color: #f2f2f2;
transition: background 2s;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.row::after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 33.33%;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}<!DOCTYPE html>
<html>
...