Me and a student colleague has been setting up a slideshow gallery for a project work. We've just finished basic programming in uni and are trying something advanced for our skill level (but want a solid presentation for our project work).
When displaying the html in live server the images in the slide show displays for a brief moment then disappears. The relative links are correct (as the images do display briefly). As I've understood it, it is the CSS that is not working properly with browser compatibility. Must all images have somewhat the same pixel size width and height? Or should the CSS be set up for images in pixel width and height instead of % ? Is the gallery container variables not compatible with the images (set position relative, width 100%, max-height 75%)?
We've been reading around and tried numerous things. I've checked the html and javascript over and over and concluded it must be the CSS. Gone through the container variables, images variable etc and tried changing after reading various forums without luck. I also read that it might be the fading function needing an onward variable, however tried it without luck. Also, we got some bootstrap scripts from a teachers template. We've tried deleting those scripts but they don't seem to interfere with the slideshow display. Have tried different browser and gone through browser settings possibly interfering with display of images but not working either.
Grateful for any help or pointers that can help us get our slideshow working for our project.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("gallery");
let dots = document.getElementsByClassName("indicator");
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";
}body {
padding: 1vw;
font-family: 'Palatino', 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', 'Georgia,serif';
line-height: 1.25;
font-size: 1.3vw;
width: 100%;
margin: 0
}
h1,
h2,
h3,
nav,
footer {
text-align: center;
}
nav {
margin-bottom: 1vw;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 1vw;
}
h2 {
padding: 1vw;
}
h3 {
font-weight: bold;
padding: 1vw;
}
#details {
padding: 2vw;
margin: 1vw;
text-align: center;
}
footer {
border-top: 1px solid black;
padding-top: 1vw;
margin-top: 1vw;
}
.copyright {
width: 50%;
margin: auto;
}
.copyright_logos,
.copyright_text {
display: inline;
}
.copyright_logo {
width: 1vw;
margin: .15vw;
}
* {
box-sizing: border-box
}
.gallery {
display: none;
}
img {
vertical-align: middle;
}
/* Container for gallery */
.gallery-container {
position: relative;
margin: auto;
width: 100%;
max-height: 75%;
}
/* Buttons for next & previous */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 10%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Black background color on hover */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* "Next button" positioned to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Number images */
.number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Indicators */
.indicator {
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading */
.fade {
animation-duration: 1.5s;
animation-name: fade;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* Decrease text size on smaller screens */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}<main id="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-4">
<!-- Gallery container -->
<div class="gallery-container">
<!-- Images with numbering -->
<div class="gallery fade">
<div class="number">1 / 4</div>
<img src="/collection/img/germanbuilding/2.2(page4).jpg" style="width:100%" height="100%">
</div>
<div class="gallery fade">
<div class="number">2 / 4</div>
<img src="/collection/img/germanbuilding/4.8.jpg" style="width:100%">
</div>
<div class="gallery fade">
<div class="number">3 / 4</div>
<img src="/collection/img/germanbuilding/4.9.jpg" style="width:100%">
</div>
<div class="gallery fade">
<div class="number">4 / 4</div>
<img src="/collection/img/germanbuilding/5.5(page158-159).jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The indicators -->
<div style="text-align:center">
<span class="indicator" onclick="currentSlide(1)"></span>
<span class="indicator" onclick="currentSlide(2)"></span>
<span class="indicator" onclick="currentSlide(3)"></span>
<span class="indicator" onclick="currentSlide(4)"></span>
</div>
</div>
</div>
</div>
</main>Found the problem, the problem is you are using Bootstrap. Maybe the class fade is already styled at Bootstrap, so you can’t use this class name.
Just change the class name and the problem can be solved, as follows
HTML:
<div class="gallery fade1">
<div class="number">1 / 4</div>
<img src="/collection/img/germanbuilding/2.2(page4).jpg" style="width:100%" height="100%">
</div>
<div class="gallery fade1">
<div class="number">2 / 4</div>
<img src="/collection/img/germanbuilding/4.8.jpg" style="width:100%">
</div>
<div class="gallery fade1">
<div class="number">3 / 4</div>
<img src="/collection/img/germanbuilding/4.9.jpg" style="width:100%">
</div>
<div class="gallery fade1">
<div class="number">4 / 4</div>
<img src="/collection/img/germanbuilding/5.5(page158-159).jpg" style="width:100%">
</div>
CSS:
.fade1 {
animation-duration: 1.5s;
animation-name: fade;
}