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>

Infinite horizontal scrolling image loop, does not work

i created an automatic horizontal slider. In my codepen it worked fine, until I realized that if I widen the screen, it no longer works, it is not continuous but leaves a blank space at the end, then it starts all over again brutally. If I insert a fixed and small width to my css everything works fine, but if I remove it and I want it to be full screen, it gives me this problem. How can I solve? thank you
#prodotti {
height:350px;
width:100%;
position:relative;
overflow:hidden;
}
.photo {
position:absolute;
top:0px;
left:0px;
overflow:hidden;
white-space: nowrap;
animation: move 10s linear infinite;
}
.photo img {
margin: 0 0.5em
}
#keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-50%, 0);
}
}
<div id="prodotti">
<div id="photo" class="photo">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
</div>
Now if you see here it works as I want it, but if you try to enlarge the screen or insert it in a full screen page for example 1920px, this is no longer infinite, but it leaves white space.
This is how I see it when it comes to an end.
enter image description here
I also accept advice with javascript, like with infinite margins or I don't know.

It works now, also made it responsive
window.onresize = (() => {
var imgWidth = Math.min(
window.innerWidth,
window.innerHeight
);
document.getElementById('photo').innerHTML = '';
for(var i = 0;true;i++) {
if (
(document.querySelectorAll('img').length * imgWidth) <
(window.innerWidth * 2)) {
var img = new Image();
img.src = "https://picsum.photos/200"
document.getElementById('photo').append(img);
document.getElementById('photo').append(img);
document.getElementById('photo').animation =
`move ${document.querySelectorAll('img').length / 6}s linear infinite`
} else {
return -1;
}
}
});
body {
overflow: hidden;
margin: 0px;
}
#prodotti {
height: 350px;
width: 100%;
position: relative;
overflow: hidden;
}
.photo {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
white-space: nowrap;
animation: move 10s linear infinite;
padding: 0.5vh;
margin: 8px 0px 0px 0px;
}
.photo img {
margin: 0 0.5em;
height: calc(100vh - 16px);
}
#keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-50%, 0);
}
}
#media only screen and (orientation: portrait) {
.photo img {
margin-top: calc(50vh - 50vw);
height: calc(100vw - 16px);
}
}
<div id="prodotti">
<div id="photo" class="photo">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
</div>

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);
});

CSS Slideshow Displaying Inside A Container. How?

Goal:
To have a slideshow in this frame.
Here's a jsfiddle of it:
https://jsfiddle.net/kf3cqk6y/2/
$slides:4;
$time_per_slide:4;
$total_animation_time:$time_per_slide * $slides;
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round # {
$total_animation_time
}
s infinite;
opacity:0;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#for $index from 1 to $slides + 1 {
img: nth-child(# {
$index
}
) {
animation-delay: # {
$total_animation_time - $time_per_slide * $index
}
s
}
}
<body>
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
</body>
Question:
How do I have the images display in the container?

You need to set the fiddle styling to be scss not css
Here's an updated fiddle
And if you want to include it in your web page, use the code from this fiddle

Transistions in swapping images

I just made a very simple "imageslider" but it does not slide, so lets call it a "imageswapper".
Alright. My question is now, how can I make it slide in and slide out so its smooth.
JSFIDDLE
[JS]
document.getElementById('atwo').style.display = "none";
function ImgSwap(){
if(document.getElementById('one').style.display == "block"){
document.getElementById('one').style.display = "none";
document.getElementById('two').style.display = "block";
}else{
document.getElementById('two').style.display = "none";
document.getElementById('one').style.display = "block";
}
}
[HTML]
<div id="wrapper">
<a onclick="ImgSwap()" id="aone"><img src="one.jpg" alt="one" class="img" id="one" /></a>
<a onclick="ImgSwap()" id="atwo"><img src="two.gif" alt="two" class="img" id="two" /></a>
</div>
[CSS]
img.img
{
height: 200px;
width: 300px;
}
#one
{
display: block;
}
#two
{
display:none;
}
a:hover
{
cursor: pointer;
}
div#wrapper
{
width: 300px;
}

There are many ways to achieve this effect, one way to do this is by applying css transition to your css class. You can change the opacity and position of the image to create the slides in effect.
function ImgSwap() {
document.getElementById('one').classList.toggle('show');
document.getElementById('two').classList.toggle('show');
}
div#wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: black;
}
.img {
height: 200px;
width: 300px;
position: absolute;
top: 0;
left: -300px;
opacity: 0;
}
a:hover {
cursor: pointer;
}
.show {
left: 0;
opacity: 1;
transition: left 1s;
}
<div id="wrapper">
<a onclick="ImgSwap()" id="aone">
<img src="https://c2.staticflickr.com/6/5120/5824578555_d239d42195_b.jpg" alt="one" class="img show" id="one" />
</a>
<a onclick="ImgSwap()" id="atwo">
<img src="http://petsadviser.supercopyeditors.netdna-cdn.com/wp-content/uploads/2012/06/why-is-cat-scared-rain-thunder.png" alt="two" class="img" id="two" />
</a>
</div>