Develop Reference

Javascript interfering with CSS Transition

I've recently started work on a basic landing-page website. Part of the page is a basic image slider with both the auto-nav and the manual nav being powered by JS. I got everything working but for one thing: I just can't figure out how to get the smooth transition between images - as seen in this example - to work. I figured out the problem after reading some related questions on Stackoverflow: To make the Slideshow work I'm using slides[i].style.display = "none"; and slides[slideIndex-1].style.display = "block"; to update the css code handling the 'display' element - this over rights the 'transition: 2s' css code one would need for the simple slide animation as seen in the video.
As I'm terribly new to Web development I could not wrap my head around possible solutions posted here on Stackoverflow and would really appreciate anyone that could help me out with an answer to my specific problem or an alternative way to solve it.
Cheers,
Jerome
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("item");
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";
}
//automatic
var slideIndexAuto = 0;
showSlidesAuto();
function showSlidesAuto() {
var i;
var slides = document.getElementsByClassName("item");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
dots[i].className = dots[i].className.replace(" active", "");
}
slideIndexAuto++;
if (slideIndexAuto > slides.length) {
slideIndexAuto = 1
}
slides[slideIndexAuto - 1].style.display = "block";
dots[slideIndexAuto - 1].className += " active";
setTimeout(showSlidesAuto, 5000);
}
.slider {
width: 65%;
max-width: 940px;
height: 500px;
border-radius: 0.25rem;
position: relative;
overflow: hidden;
}
.slider .left-slide,
.slider .right-slide {
position: absolute;
height: 40px;
width: 40px;
background-color: #444444;
border-radius: 50%;
color: #ffffff;
font-size: 20px;
top: 50%;
cursor: pointer;
margin-top: -20px;
text-align: center;
line-height: 40px;
}
.slider .left-slide:hover,
.slider .right-slide:hover {
box-shadow: 0px 0px 10px black;
background-color: #29a8e2;
}
.slider .left-slide {
left: 30px;
}
.slider .right-slide {
right: 30px;
}
.slider .slider-items .item img {
width: 100%;
height: 500px;
display: block;
}
.slider .slider-items .item {
position: relative;
transition: 4s;
}
.slider .slider-items .item .caption {
position: absolute;
width: 100%;
height: 100%;
bottom: 0px;
left: 0px;
background-color: rgba(0, 0, 0, .5);
}
<div class="slider">
<div class="slider-items">
<div class="item fade">
<img src="/images/cs-slider-high.jpg" />
<div class="caption">
<p class="caption-text">COMING</p>
<p class="caption-text">OKTOBER 10th</p>
</div>
</div>
<div class="item fade">
<img src="/images/building-slider.jpg" />
<div class="caption">
<p class="caption-text-2">Blackstoneroad 109</br>
</p>
</div>
</div>
<div class="item fade">
<img src="/images/kontact-slider.jpg" />
<div class="caption">
<p class="caption-text-3">Coffee<br>Drinks<br>Food<br>& More</p>
</div>
</div>
<div class="item fade">
<img src="/images/seminar-slider.jpg" />
<div class="caption">
<p class="caption-text-3">Seminar Rooms<br>Inspiration<br>Shopping<br>& More</p>
</div>
</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- The dots/circles -->
<div class="align-text-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(3)"></span>
</div>

How is this: http://jsfiddle.net/lharby/qox05y96/
For simplification I have stripped out the dot animation (although that code is closer to the effect you want).
Here is the simplified JS:
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("item");
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].classList.remove('active'); // this is updated
}
slides[slideIndex - 1].className += " active";
}
//automatic
var slideIndexAuto = 0;
showSlidesAuto();
function showSlidesAuto() {
var i;
var slides = document.getElementsByClassName("item");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove('active'); // this is updated
}
slideIndexAuto++;
if (slideIndexAuto > slides.length) {
slideIndexAuto = 1
}
slides[slideIndexAuto - 1].classList.add('active'); // this is updated
setTimeout(showSlidesAuto, 4000);
}
This means we also have to change the css. display none/block is harder to animate with css transitions. So I have used opacity: 0/1 and visibility: hidden/visible. However one other trade off is that that the item elements cannot be positioned relatively this would stack them on top of one another (or side by side) usually for an animated slideshow you would use position absolute for each slide, but I realise that causes you another issue.
CSS:
.slider .slider-items .item {
visibility: hidden;
opacity: 0;
transition: 4s;
}
.slider .slider-items .item.active {
visibility: visible;
opacity: 1;
transition: 4s;
}
At least now all of the css is handled within the css and the js purely adds or removes a class name which I feel makes it a bit easier to update.

There are priorities as far as what CSS deems should happen.
Take a look at this and let me know if it changes anything for you. If not I'll try and run the code and fix your errors. I want to let you know in advance, I am a pure JS developer. When I need CSS or HTML I create it in JS. I want you to try first, thus it will make you a better developer.
https://www.thebookdesigner.com/2017/02/styling-priorities-css-for-ebooks-3/

Problem with changing slides in carousel, written only in js and css

Sorry for the possible duplication, but I did not find a solution to my problem.
About my problem. I am trying to create a slide carousel using only js and css.
What I need is an alternation of slides when we press the “forward” or “back” buttons (for example, the previous slide goes off to the left, while the new slide simultaneously appears from the right when “forward” is pressing).
The code is here:
var slideIndex = 0;
var prev_slideIndex = slideIndex;
function myanimate() {
str = 'slideIndex=' + slideIndex + ' prev_slideIndex=' + prev_slideIndex;
var slides = document.getElementsByClassName("child");
for (var i = 0; i < slides.length; i++) slides[i].style.display = "none";
if (prev_slideIndex < slideIndex) {
if (slideIndex > 3) slideIndex = 0;
slides[prev_slideIndex].style.left = '-100%';
slides[prev_slideIndex].style.marginleft = '0%';
slides[slideIndex].style.left = '0%';
slides[slideIndex].style.marginleft = '0%';
slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel 1.5s';
} else {
if (slideIndex < 0) slideIndex = 3;
slides[prev_slideIndex].style.left = '100%';
slides[prev_slideIndex].style.marginleft = '0%';
slides[slideIndex].style.left = '0%';
slides[slideIndex].style.marginleft = '0%';
slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel_back 1.5s';
}
slides[prev_slideIndex].style.display = 'block';
slides[slideIndex].style.display = 'block';
prev_slideIndex = slideIndex;
str += ' final prev_slideIndex=' + prev_slideIndex;
document.getElementById("text").innerHTML = str;
}
.parent {
background-color: red;
display: block;
position: relative;
width: 600px;
height: 100px;
padding-top: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.child {
background-color: green;
display: block;
position: absolute;
width: 100%;
height: 100px;
color: #FFFFFF;
font-size: 24px;
text-align: center;
}
#keyframes caroussel {
from {
margin-left: 100%
}
to {
margin-left: 0%
}
}
#keyframes caroussel_back {
0% {
margin-left: -100%
}
100% {
margin-left: 0%
}
}
<input type="submit" value='forward' title="sdg" onclick="slideIndex++;myanimate();">
<input type="submit" value='backward' title="sdg" onclick="slideIndex--;myanimate();">
<br>
<div class="parent">
<div class="child" style="background-color:yellow;left:0%;">
Caption1<br>Caption1 Caption1 Caption1 Caption Caption Caption Caption Caption Caption
</div>
<div class="child" style="left:100%;">
Caption2<br>Caption2 Caption2 Caption2 Caption2 Caption Caption Caption Caption Caption
</div>
<div class="child" style="background-color:magenta;left:100%;">
Caption3<br>Caption3 Caption3 Caption3 Caption3 Caption Caption Caption Caption Caption
</div>
<div class="child" style="background-color:cyan;left:100%;">
Caption4<br>Caption4 Caption4 Caption4 Caption4 Caption Caption Caption Caption Caption
</div>
</div>
<br>
<span id="text"></span>
It works correctly if we press the “forward” and “back” buttons alternately (we can observe two slides), but it works incorrectly if we press one of these buttons several times (the previous slide disappears).
Does anyone know why it doesn’t work correctly or maybe there are any ideas how to improve the code?
Thank you in advance.
I tested in Firefox 74.0 (32bit). 'transform: translateX(...)' in css gives me the same behavior.

The slide with the prev_slideIndex already got the same value for the animation on the previous iteration of the carousel. Therefore you need to use reflow to force this slide to play the same animation one more time:
slides[prev_slideIndex].offsetHeight; /* trigger reflow */
var slideIndex = 0;
var prev_slideIndex = slideIndex;
function myanimate() {
str = 'slideIndex=' + slideIndex + ' prev_slideIndex=' + prev_slideIndex;
var slides = document.getElementsByClassName("child");
for (var i = 0; i < slides.length; i++) slides[i].style.display = "none";
if (prev_slideIndex < slideIndex) {
if (slideIndex > 3) slideIndex = 0;
slides[prev_slideIndex].style.left = '-100%';
slides[prev_slideIndex].style.marginleft = '0%';
slides[slideIndex].style.left = '0%';
slides[slideIndex].style.marginleft = '0%';
slides[prev_slideIndex].offsetHeight; /* trigger reflow */
slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel 1.5s';
} else {
if (slideIndex < 0) slideIndex = 3;
slides[prev_slideIndex].style.left = '100%';
slides[prev_slideIndex].style.marginleft = '0%';
slides[slideIndex].style.left = '0%';
slides[slideIndex].style.marginleft = '0%';
slides[prev_slideIndex].offsetHeight; /* trigger reflow */
slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel_back 1.5s';
}
slides[prev_slideIndex].style.display = 'block';
slides[slideIndex].style.display = 'block';
prev_slideIndex = slideIndex;
str += ' final prev_slideIndex=' + prev_slideIndex;
document.getElementById("text").innerHTML = str;
}
.parent {
background-color: red;
display: block;
position: relative;
width: 600px;
height: 100px;
padding-top: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.child {
background-color: green;
display: block;
position: absolute;
width: 100%;
height: 100px;
color: #FFFFFF;
font-size: 24px;
text-align: center;
}
#keyframes caroussel {
from {
margin-left: 100%
}
to {
margin-left: 0%
}
}
#keyframes caroussel_back {
0% {
margin-left: -100%
}
100% {
margin-left: 0%
}
}
<input type="submit" value='forward' title="sdg" onclick="slideIndex++;myanimate();">
<input type="submit" value='backward' title="sdg" onclick="slideIndex--;myanimate();">
<br>
<div class="parent">
<div class="child" style="background-color:yellow;left:0%;">
Caption1<br>Caption1 Caption1 Caption1 Caption Caption Caption Caption Caption Caption
</div>
<div class="child" style="left:100%;">
Caption2<br>Caption2 Caption2 Caption2 Caption2 Caption Caption Caption Caption Caption
</div>
<div class="child" style="background-color:magenta;left:100%;">
Caption3<br>Caption3 Caption3 Caption3 Caption3 Caption Caption Caption Caption Caption
</div>
<div class="child" style="background-color:cyan;left:100%;">
Caption4<br>Caption4 Caption4 Caption4 Caption4 Caption Caption Caption Caption Caption
</div>
</div>
<br>
<span id="text"></span>

creating html div from json using javascript

i wanted to create a sliding image gallery in a div. To get the images and the description i make a get request on an api. The returned json is as expected and until that, the code works.
I have found this sliding gallery on W3Ccourses https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto and i wanted to use it with my data.
I get these 2 errors:
Unable to get property 'style' of undefined or null reference Here is the code
'require' is not defined
i have tried with require.js but it didn't work. I tried to create my div even with document.createElement and then .appendChild but it didn't work. I don't think the issue is in creating the html element. Thanks for replying
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<!-- ####################################################### -->
<body>
<div class="slideshow-container">
<!-- ### want to get this kind of div , but with my data ###
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div> -->
<script type="text/javascript">
url = 'http://www.myUrl.com';
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var httpReq = new XMLHttpRequest();
httpReq.open("GET" , url , false);
httpReq.send(null);
var jsonObj = JSON.parse(httpReq.responseText);
var description = jsonObj[i].description
for ( i = 0 ; i < 9 ; i++) {
document.writeln('<div class=\"mySlides fade\">');
document.writeln('<div class = \"numbertext\">' + i + '/9</div>');
document.writeln('<img src=\"' + jsonObj[i].url_image + '\" style="width :100%">');
document.writeln('<div class=\"text\">' + description + '</div>');
}
</script>
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>

I checked you code and I notice three things,
You don't need this line var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; you don't need to require it here as the XMLHttpRequest is part of the windows object.
Your usage of the xmlhttprequest method is wrong see correct implementation below.
var url = 'http://www.myUrl.com';
var httpReq = new XMLHttpRequest();
httpReq.open("GET" , url);
httpReq.send(null);
var jsonObj, description;
httpReq.onload = function() {
if (httpReq.status == 200) { // analyze HTTP status of the response
var jsonObj = JSON.parse(httpReq.responseText);
var description = jsonObj[i].description // e.g. 404: Not Found
for ( i = 0 ; i < 9 ; i++) {
document.writeln('<div class=\"mySlides fade\">');
document.writeln('<div class = \"numbertext\">' + i + '/9</div>');
document.writeln('<img src=\"' + jsonObj[i].url_image + '\" style="width :100%">');
document.writeln('<div class=\"text\">' + description + '</div>');
}
var slideIndex = 0;
showSlides();
} else { // show the result
alert(`Error: httpReq.status`); // responseText is the server
}
};
You will get a CORS error if you are not running this from the same origin as http://www.myUrl.com
Hope this helps.

You can use ajax request to retrieve your json data, then loop each object while appending a mySlides div
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.getJSON("https://jsonplaceholder.typicode.com/todos/1", function(result){
$.each(result, function(i, field){
$("div.slideshow-container").append(`<div class="mySlides fade"><div class="numbertext">1 / 3</div><img src="${field.url}" style="width:100%"><div class="text">${field.caption}</div></div>`);
});
});
showSlides();
});
</script>

How to create divs for slideshow image change left/ right on click?

I am trying to create a div that is 50% width left and another 50% width right of the viewport. I want each div to change the slideshow image previous / next on click
Example: https://jonoverrall.com/colin/owzib05x14nq1xd08etgqoe7nmmvum
Does anyone have any suggestions on how to achieve this?
<div class="slideshow-container">
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
<div class="text">As a Fountain 2017</div>
<div class="opacity">001 </div>
</div>
<div class="mySlides fade">
<img src="001%20(2).jpg" onclick="plusSlides(1)">
<div class="text">Deliverance 2017</div>
<div class="opacity">002 </div>
</div>
CSS
img {
height: 100%;
width: 100%;
max-height: 100vh;
max-width: 100vh;
object-fit: contain;
}
.mySlides img {
display: inline-block;
vertical-align: middle;
}
.slideshow-container img {
display: block;
margin: 0px auto;
}
JS
var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
indexes[0].innerHTML = slideIndex;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
https://codepen.io/anon/pen/xobQRM

Crossfading Images

I am creating an image 'slider' to embellish a landing page on a site. I created a successful, functional slider, though hope to push this further...
I'm hoping to add in an element that creates crossfading images on click (once a tile is selected from beneath the main image space), such as is detailed on the site here (beneath Demo 6 -Fading between multiple images on click)
I have tried integrating the code on this site into the pre-existing JS I have added (within the HTML), though it appears to interfere with the existing elements. The JSFiddle for the current code is here.
#charset "utf-8";
/* CSS Document */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.main-slide {
height: 250px;
width: 750px;
margin: auto;
}
.selection-panel {
opacity: 0.6;
filter: alpha(opacity=60);
}
.selection-panel:hover {
opacity:1.0;
filter: alpha(opacity=100);
}
.selection-panel-off {
opacity: 1.0;
filter: alpha(opacity=100);
}
.margins {
margin-top: 16px!important;
margin-bottom: 16px!important;
}
.image-spacing,.image-spacing>.single-col {
padding: 0 8px;
}
.single-col {
float: left;
width: 100%;
}
.single-col.third {
width: 33.33333%;
}
.image-spacing::after,.image-spacing::before {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage Baner Module</title>
<link rel="stylesheet" href="formatting.css" type="text/css" media="screen">
<style>
.mySlides {display:none}
.demo {cursor:pointer}
</style>
</head>
<body>
<div class="main-image" style="max-width:750px">
<img class="mySlides" src="https://dummyimage.com/750x250/ff5100/fff" height="250px" width="100%">
<img class="mySlides" src="https://dummyimage.com/750x250/00ff51/fff" height="250px" width="100%">
<img class="mySlides" src="https://dummyimage.com/750x250/0055ff/fff" height="250px" width="100%">
<div class="margins image-spacing">
<div class="single-col third">
<img class="demo selection-panel" src="https://dummyimage.com/750x250/ff5100/fff" style="width:100%" onclick="currentDiv(1)">
</div>
<div class="single-col third">
<img class="demo selection-panel" src="https://dummyimage.com/750x250/00ff51/fff" style="width:100%" onclick="currentDiv(2)">
</div>
<div class="single-col third">
<img class="demo selection-panel" src="https://dummyimage.com/750x250/0055ff/fff" style="width:100%" onclick="currentDiv(3)">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" selection-panel-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " selection-panel-off";
}
</script>
</body>
</html>

Here's one way to do this. This example assumes your images will all fit in the same size container nicely. If not, you may want to switch to background images. First, we'll put all the .mySlides in their own container element:
<div class="slides-container">
<img class="mySlides initopacity" src="https://dummyimage.com/750x250/ff5100/fff" height="250px" width="100%">
<img class="mySlides" src="https://dummyimage.com/750x250/00ff51/fff" height="250px" width="100%">
<img class="mySlides" src="https://dummyimage.com/750x250/0055ff/fff" height="250px" width="100%">
</div>
Then we'll position those slides absolutely, relative to the container:
.slides-container{
width: 750px;
height: 250px;
position: relative;
overflow: hidden;
}
.mySlides {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
This way, they're all on top of each other. Now, you'll notice, they all have the opacity of 0, but the first .mySlide element has a class called .initopacity. That one we'll keep visible on load:
.initopacity {
opacity: 1;
}
Now, all we need is a way to change the opacity on each slide upon click. We'll use some transitions for that:
.fadeout {
opacity: 0;
transition: opacity 1s linear;
}
.fadein {
opacity: 1;
transition-delay: 1s;
transition-property: opacity;
transition-duration: 1s;
}
So now, our showDivs function just adds and removes classes, instead of changing the display properties:
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
/* x[i].style.display = "none"; */
x[0].classList.remove('initopacity');
x[i].classList.remove('fadein');
x[i].classList.add('fadeout');
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" selection-panel-off", "");
}
x[slideIndex-1].classList.remove('fadeout')
x[slideIndex-1].classList.add('fadein')
/* x[slideIndex-1].style.display = "block"; */
dots[slideIndex-1].className += " selection-panel-off";
}
See fiddle: https://jsfiddle.net/pt5bLxv2/87/