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 scrolling photo banner with CSS

I'm building an infinite scrolling banner with HTML5 and CSS3. My code works but there are some small lags.. I would like a smooth scrolling effect, it's nicer for user.
There must be some way to make it more smooth, but not sure how to.
Anyway to do add a smooth effect to my animation using CSS? Or with Javascript?
Here is my demo code:
.photobanner {
position: relative;
left: -500px;
height: 233px;
width: 4550px;
margin-bottom: 30px;
}
.photobanner img {
margin: 0px 25px;
box-shadow: 2px 2px 8px #8a8a8a;
}
.first {
-webkit-animation: bannermove 180s linear infinite;
-moz-animation: bannermove 180s linear infinite;
-ms-animation: bannermove 180s linear infinite;
-o-animation: bannermove 180s linear infinite;
animation: bannermove 180s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
<div class="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>

The lagging is caused by a difference in image alignment between start and end of css animation.
It could be tricky to align so when doing this kind of animation I prefer to go with javascript + requestAnimationFrame
const speed = 2; // 2 pixels per frame at 60 frames per second
const banner = document.getElementsByClassName('photobanner')[0];
// build images array
let images = [
...banner.getElementsByTagName('img')
];
// initialize images positions
let rects = images.map((img, index) => {
const style = getComputedStyle(img);
const rect = {
left: index * (350 + 50),
top: 0,
width: 350,
height: parseInt(style.height, 10)
};
return rect;
});
function animate() {
const l = images.length;
for (let i = 0; i < l; i++) {
const img = images[i];
const rect = rects[i];
rect.left -= speed;
if (rect.left + rect.width < 0) {
// this image if fully overflowing left, put it at the end of the image list both in position and in images and rects
const lastRect = rects[rects.length - 1];
rect.left = lastRect.left + lastRect.width + 50;
images = images.slice(1, l);
images.push(img);
rects = rects.slice(1, l);
rects.push(rect);
i--;
}
// change the actual image style according to new rect value
img.style.left = rect.left + 'px';
};
requestAnimationFrame(animate);
}
animate();
.photobanner {
position: relative;
height: 233px;
width: 100%;
margin-bottom: 30px;
}
.photobanner img {
top: 0px;
width: 350px;
box-shadow: 2px 2px 8px #8a8a8a;
position: absolute;
}
<div class="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>

you can use JavaScript for better results
var e = document.getElementById("photobanner");
var x = 0;
function moveBanner() {
x--;
e.style.marginLeft = x + "px";
}
setInterval(moveBanner, 60);
.photobanner {
position: relative;
left: -500px;
height: 233px;
width: 4550px;
margin-bottom: 30px;
}
.photobanner img {
margin: 0px 25px;
box-shadow: 2px 2px 8px #8a8a8a;
}
<div class="photobanner" id="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</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);
});

Bootstrap carousel with variable images using JavaScript

So I've been working on a bootstrap carousel of which the images can be changed by clicking one of the thumbnail above. I want to use this as an interactive way to show some more pictures of the same topic as the thumbnail.
I used the template on this site as starting point for the carousel:
Carousel Template
One of the thumbnails with the <a href> for changing the carousel:
<div class="col-lg-3 hidden-md hidden-sm hidden-xs" style="padding-top:10px;padding-bottom:10px;">
<div class="hovereffect">
<img class="img-responsive" src="img/bestemmingen/fotos_sneeuw/Sneeuw.jpg" alt="">
<div class="overlay">
<h2>Sneeuw</h2>
-->
</div>
</div>
</div>
Working code for the carousel as a static one:
HTML:
<div id="carousel">
<figure id="spinner">
<img id="img1" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen.jpg" alt>
<img id="img2" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen2.jpg" alt>
<img id="img3" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen4.jpg" alt>
<img id="img4" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen5.jpg" alt>
<img id="img5" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen7.jpg" alt>
<img id="img6" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen8.jpg" alt>
<img id="img7" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen9.jpg" alt>
<img id="img8" src="/img/bestemmingen/fotos_auto_&_kamperen/Auto%20&%20Kamperen10.jpg" alt>
</figure>
</div>
<span style="float:left" class="ss-icon" onclick="galleryspin('-')"><</span>
<span style="float:right" class="ss-icon" onclick="galleryspin('')">></span>
CSS:
div#carousel {
perspective: 1200px;
background: white;
padding-top: 10%;
font-size:0;
margin-bottom: 3rem;
overflow: hidden;
}
figure#spinner {
transform-style: preserve-3d;
height: 400px;
transform-origin: 50% 50% -500px;
transition: 1s;
}
figure#spinner img {
width: 100%; max-width: 400px;
position: absolute; left: 30%;
transform-origin: 50% 50% -500px;
outline:1px solid transparent;
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg);
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span {
color: black;
margin: 5%;
display: inline-block;
text-decoration: none;
font-size: 2rem;
transition: 0.6s color;
position: relative;
margin-top: -6rem;
border-bottom: none;
line-height: 0; }
div#carousel ~ span:hover { color: darkslategray; cursor: pointer; }
I was thinking of Jscript to make it interactive. I tried it with this code, but I know I did something wrong with the document.getElementByIds at the end because I don't do anything with the var Src:
<script>
function ChangeSrc() {
var Src = document.getElementById("Input").value;
var img1;
var img2;
var img3;
var img4;
var img5;
var img6;
var img7;
var img8;
switch (Src)
{
case 'auto':{
img1 = "/img/bestemmingen/fotos_auto/Auto2.jpg";
img2 = "/img/bestemmingen/fotos_auto/Auto3.jpg";
img3 = "/img/bestemmingen/fotos_auto/Auto4.jpg";
img4 = "/img/bestemmingen/fotos_auto/Auto5.jpg";
img5 = "/img/bestemmingen/fotos_auto/Auto6.jpg";
img6 = "/img/bestemmingen/fotos_auto/Auto7.jpg";
img7 = "/img/bestemmingen/fotos_auto/Auto8.jpg";
img8 = "/img/bestemmingen/fotos_auto/Auto9.jpg";
break;
}
case 'etc':{
etc
}
case 'sneeuw':{
img1 = "/img/bestemmingen/fotos_sneeuw/Sneeuw2.jpg";
img2 = "/img/bestemmingen/fotos_sneeuw/Sneeuw3.jpg";
img3 = "/img/bestemmingen/fotos_sneeuw/Sneeuw4.jpg";
img4 = "/img/bestemmingen/fotos_sneeuw/Sneeuw5.jpg";
img5 = "/img/bestemmingen/fotos_sneeuw/Sneeuw6.jpg";
img6 = "/img/bestemmingen/fotos_sneeuw/Sneeuw7.jpg";
img7 = "/img/bestemmingen/fotos_sneeuw/Sneeuw8.jpg";
img8 = "/img/bestemmingen/fotos_sneeuw/Sneeuw9.jpg";
break;
}
}
}
document.getElementById("img1").src = img1;
document.getElementById("img2").src = img2;
document.getElementById("img3").src = img3;
document.getElementById("img4").src = img4;
document.getElementById("img5").src = img5;
document.getElementById("img6").src = img6;
document.getElementById("img7").src = img7;
document.getElementById("img8").src = img8;
}
</script>
I don't really know how to tie the loose ends because I don't know a lot about JS, so any help would be appreciated!
Thanks in advance.

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