We Keep Coding

javascript img slide not fading

I have a javascript that changes the IMG every 5 seconds and it works fine. The issue is I tried to add a fade transition effect on it but it is not being applied to it. Where did I go wrong? Any help is appreciated. Thanks in advance.
let images = ['Img2.jpg', 'Img3.jpg', 'Img4.jpg', 'Img5.jpg'];
let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
function change() {
imgElement.src = images[index];
index > 1 ? index = 0 : index++;
}
window.onload = function() {
setInterval(change, 5000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.active {
opacity: 1;
z-index: 2;
}
<div class="mainDisplay">
<img id="mainDisplayImg" src="Img1.jpg">
<img class="slide active" src="Img2.jpg" style="display: none">
<img class="slide" src="Img3.jpg" style="display: none">
<img class="slide" src="Img4.jpg" style="display: none">
<img class="slide" src="Img5.jpg" style="display: none">
</div>

First of all, if you want any kind of transitions, don't use display: none it just doesn't play nice. You can "hide" elements by placing them outside of view area instead;
Second since you already have predefined images in the html, you don't have to duplicate them in javascript, you can cycle through html elements instead and set active class:
let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
const slides = document.querySelectorAll(".mainDisplay .slide");
function change() {
if (++index >= slides.length)
index = 0;
for(let i = 0; i< slides.length; i++)
slides[i].classList.toggle("active", i == index);
}
window.onload = function() {
setInterval(change, 2000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
top: -100wh; /* hide from view */
}
.active {
opacity: 1;
z-index: 2;
position: initial;
}
<div class="mainDisplay">
<img class="slide active" src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj">
</div>

This should work for you.
const imgElement = document.querySelectorAll('.slide');
let i = 1;
window.onload = function () {
setInterval(function () {
i = i % 5;
imgElement[i].classList.add('active');
imgElement[i].previousElementSibling?.classList.remove('active');
if (i == 0 && imgElement[4].classList.contains('active')) {
imgElement[4].classList.remove('active');
}
i++;
}, 5000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
display: none;
}
.active {
display: block;
animation: fadeIn 1s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="mainDisplay">
<!-- <img id="mainDisplayImg" src="./Img1.jpg" /> -->
<img class="slide active" src="./Img1.jpg" />
<img class="slide" src="./Img2.jpg" />
<img class="slide" src="./Img3.jpg" />
<img class="slide" src="./Img4.jpg" />
<img class="slide" src="./Img5.jpg" />
</div>

After clicking a hamburger icon, the menu does not display above slide-show images on the main page

I do not know how to show the menu above the slide-show images after clicking the hamburger icon. I used z-index and .addClass in order to add the diplay:none property to the #slideshow. This did not work. I do not know what I can do next.
https://jsfiddle.net/ft31scgw/
main.js
<script>
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
function hMenu() {
var menu = document.getElementById("toggle");
if(menu) {
var hide = $("#slideshow").hide();
} else {
var show = $("#slideshow").show();
}
}
</script>
style.css
enter image description here
#media only screen and (max-width: 736px) {
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
button {
text-transform: uppercase;
font-weight: bold;
}
.logo img {
width: 80%;
max-width: 473px;
height: 50px;
}
label{
display: block;
cursor: pointer;
z-index: 10;
}
.menu {
text-align: center;
width: 100%;
display: none;
background: black;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 1;
}
#toggle:checked + .menu {
display: block;
z-index: 10;
}
#slideshow {
z-index: 0;
}
.disappear {
display:none;
z-index: -2;
}
}/* #media min-width 736px */
index.html
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" onclick="hMenu()" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" alt=""></div>
<div><img src="img/image2.jpg" alt=""></div>
<div><img src="img/image3.jpg" alt=""></div>
</div>
</section>

Good to know, that z-index specifies the stack order of siblings elements. In your case <div class="header"> needs z-index greater than <section id="slideshow">. z-index only works on positioned elements, so both of them should have position:relative. I made a working example for you on jsFiddle.

How to add transition sliding image for my slideshow?

Im working in an image slider. What I was able to do is very simple, and I want to add a transition effect like image sliding , or something like that. If someone knows how to add it to my code it would help me a lot. Here is what I did so far:
.banner-container {
width: 100%;
position: relative;
z-index:0;
height:100% !important;
background: no-repeat center center scroll
}
.banner-container.nomgr {
margin-top:0px;
}
.banner-container-center {
margin-top:-105px;
width: 100%;
position: relative;
z-index:0;
}
.banner {
width: 100%;
position: relative;
z-index:0;
height:120 !important;
background: no-repeat center center scroll
}
.banner-full-height {
width: 100%;
height:auto;
position: relative;
z-index:2;
}
.banner-center {
width: auto;
position: relative;
z-index:2;
}
<div class="banner-container revolution">
<div class="banner">
<ul>
<li > <img src="/images/slide1.png" /></li>
<li > <img src="/images/slide2.png" /></li>
<li > <img src="/images/slide3.png" /></li>
</ul>
</div>
</div>

I have edited your code to add the effect. Change the image source before using
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0px;
width: 100%;
padding: 0px;
}
.ani-top{position:relative;animation:animatetop 0.5s}
#keyframes animatetop{from{top:-500px;opacity:0}
to{top:0;opacity:1}}
</style>
</head>
<body>
<div style="max-width:500px">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(1).jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(2).jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download.jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(3).jpg" style="width:100%">
</div>
<script type="text/javascript">
var pos = 0;
slideshow();
function slideshow() {
var i;
var x = document.getElementsByClassName("slidetop");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
pos++;
if (pos > x.length) {pos = 1}
x[pos-1].style.display = "block";
setTimeout(slideshow, 2500);
}
</script>
</body>
</html>

Setinterval() function need to reset

I'm trying to create section with couple images.Idea is to dynamically change those images, but my problem is: when section is loaded and animation is complete whole process stop but it should continue all over again.
Can somebody help me to achieve that?
Thank you.
Here is my code so far:
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
$slide.next().addClass('slideUp');
},2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>

You could keep the interval running, but change the way you look for the next slide: check if there is a next one, if so, take it, otherwise pick the first one:
$slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
$slide.addClass('slideUp');

Your loop is not infinite because last element do not have next() elements. You should check for that to appear and then take first element of collection instead.
Check the snippet below.
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
var $nextSlide = $slide.next();
if(!$nextSlide.length) {
$nextSlide = $('div.block').eq(0);
}
$nextSlide.addClass('slideUp');
}, 2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>

Thank you all for help I appreciate that.
Here is the another function that working properly.
Sincerly
$(document).ready(function(){
var currentIndex = 0,
items = $('.block'),
itemAmt = items.length;
function cycleItems() {
var item = $('.block').eq(currentIndex);
items.removeClass('slideUp');
item.addClass('slideUp');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 2000);
});

How to make all my divs line up together nicely

I've been playing around with my code, I have the Calendar set up to do what i want, now I am just trying to get the <p> and iframe lined up beside each other nicely, i have this code so far jsfiddle and here is an example of what the separation f the arrows and iframe looks like now
what i want to achieve:
200px----[ arrowLEFT ]---30px---[ Iframe ]---30px---[ arrowRIGHT
]
HTML:
<div id="miniFeed">
<p id="toggle">
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)">
<img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"></a></span>
<span> </span>
</p>
<div id="calender">
<div id="left"> <iframe src="calenderAPRIL.html" width="350px" height="400px"></iframe>
</div>
<div id="right"> <iframe src="calenderMAY.html" width="350px" height="400px"></iframe>
</div>
</div>
<p id="toggle">
<span> </span>
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)">
<img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"></a></span>
</p>
</div>
JAVASCRIPT:
window.onload=function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
};
CSS:
#miniFeed {
}
#right { display:none; }
#LeftArrow {
z-index: 100;
width: auto;
float: left;
margin-left: 200px;
display: block;
}
#calender {
float: left;
z-index: -1;
}

Try this
html:
<div id="miniFeed">
<div class="arrow leftArrow">
</div>
<div class="calendars">
<div class="carousel">
<div class="calendar-1">
</div>
<div class="calendar-2">
</div>
</div>
</div>
<div class="arrow rightArrow">
</div>
css:
#miniFeed {
width: 400px;
height: 250px;
}
#miniFeed > div {
float: left;
height: 100%;
}
.arrow {
width: 100px;
background: blue;
}
.calendars {
width: 200px;
overflow: hidden; /*the magic*/
}
.carousel {
width: 400px; /* the size is number of calendars * the width per calendar */
height: 100%;
}
.carousel > div {
width: 200px;
height: 100%;
float: left;
}
.calendar-1 {
background: red;
}
.calendar-2 {
background: green;
}
js:
$('.leftArrow').click(function() {
//we move the carousel negative
//the value 200 is the width of a calendar
$('.carousel').animate({marginLeft: -200}, 300);
});
$('.rightArrow').click(function() {
//we move the carousel negative
$('.carousel').animate({marginLeft: 0}, 300);
});
We create a wrapper with overflow hidden, so inside it we have our collections of calendars.
Result:
http://jsfiddle.net/renanvalentin/kzTRz/