Develop Reference

JS variable have not the value that it should have (with JS, SCSS and Nuxt.js)

I have a photo gallery in JavaScript, using Nuxt.js. The problem is that the variable slideIndex should be equal to a number (defined with the .onclick events), and when we look at this variable in the JS console, we see it as undefined. The consequences are that slideIndex is not a number (NaN), so it not corresponds to an image, and so slides[slideIndex-1].style.display returns a TypeError because it's not possible to know the display of nothing.
Here is the js, scss and vue code :
window.addEventListener('load', function () {
let slideIndex;
// Open PopUp
document.querySelector(".lienImg1").onclick = function() {
document.querySelector(".photo-gallery-fullscreen").style.display = "block";
document.querySelector(".slide-container img:nth-child(1)").style.display = "block";
slideIndex = 1; // slideIndex should be equal to 1, but is not (undefined)
};
document.querySelector(".lienImg2").onclick = function() {
document.querySelector(".photo-gallery-fullscreen").style.display = "block";
document.querySelector(".slide-container img:nth-child(2)").style.display = "block";
slideIndex = 2; // slideIndex should be equal to 2, but is not (undefined)
};
document.querySelector(".lienImg3").onclick = function() {
document.querySelector(".photo-gallery-fullscreen").style.display = "block";
document.querySelector(".slide-container img:nth-child(3)").style.display = "block";
slideIndex = 3; // slideIndex should be equal to 3, but is not (undefined)
};
// Close PopUp
document.querySelector(".out").onclick = function() {
document.querySelector(".photo-gallery-fullscreen").style.display = "none";
document.querySelector(".slide-container img:nth-child(1)").style.display = "none";
document.querySelector(".slide-container img:nth-child(2)").style.display = "none";
document.querySelector(".slide-container img:nth-child(3)").style.display = "none";
slideIndex = 1;
};
});
// Gallery Full Screen
let slideIndex;
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Problem : slideIndex is not defined (undefined) --> it's not a number (NaN) --> it not corresponds to an image --> "slides[slideIndex-1].style.display" returns (TypeError)
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".photo-fullscreen");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
// Photo Gallery
.photo-gallery-section {
margin: 50px 0;
.photo-gallery {
width: 80%;
height: 250px;
margin: auto;
display: grid;
grid-template-rows: 250px;
grid-template-columns: repeat(3, 250px);
justify-content: space-between;
gap: 10px;
.photo:hover {
cursor: pointer;
}
.photo:nth-child(1) {
background: url(https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1820&q=80) center center / cover;
}
.photo:nth-child(2) {
background: url(https://images.unsplash.com/photo-1575052814086-f385e2e2ad1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80) center center / cover;
}
.photo:nth-child(3) {
background: url(https://images.unsplash.com/photo-1524863479829-916d8e77f114?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80) center center / cover;
}
}
.photo-gallery-fullscreen {
display: none;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
z-index: 1;
.slide-container {
width: fit-content;
margin: calc(50vh - 225px) auto;
}
.slide-container img {
height: 450px;
z-index: 3;
display: none;
}
.prev,
.next {
cursor: pointer;
color: #333;
font-weight: bold;
font-size: 40px;
z-index: 3;
position: absolute;
}
.prev {
margin: calc(50vh - 21px) 0;
margin-left: 15vw;
left: 0;
}
.next {
margin: calc(50vh - 21px) 0;
margin-right: 15vw;
right: 0;
}
.out {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
}
}
}
<section class="photo-gallery-section" id="photo-gallery-section">
<h2 class="photo-gallery-title">Gallerie Photo</h2>
<div class="photo-gallery">
<div class="photo lienImg1"></div>
<div class="photo lienImg2"></div>
<div class="photo lienImg3"></div>
</div>
<div class="photo-gallery-fullscreen">
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
<div class="slide-container">
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1820&q=80" />
<img
src="https://images.unsplash.com/photo-1575052814086-f385e2e2ad1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
class="photo-fullscreen"
/>
<img src="https://images.unsplash.com/photo-1524863479829-916d8e77f114?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80" />
</div>
<div class="out"></div>
</div>
</section>
Thank you very much for your help,
Maxime

let slideIndex in the load event function is local to that (anonymous) function., and shadows the global definition underneath the comment // Gallery Full Screen.
The simplest solution may be to remove the declaration of slideIndex from the load event handler so that the global variable is used by all code.

Simplify JS code using Nuxt.js not working

I have a photo gallery in JavaScript, using Nuxt.js. In the photo gallery, it get the images and (on click), display them in full screen. Everything is working well, but my code is not really good (it can be improved, because it's repetitive). Here is my actual JS, SCSS and Vue code :
window.addEventListener('load', function () {
// Add the photo corresponding to the one in the photo gallery, to the photo gallery full screen
const photo = document.querySelectorAll(".photo");
for (let i = 0; i < photo.length; i++) {
const style = photo[i].currentStyle || window.getComputedStyle(photo[i], false);
const photoBackground = style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
const photoFullscreen = document.querySelectorAll(".photo-fullscreen");
photoFullscreen[i].setAttribute("src", photoBackground);
}
// Open PopUp
const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
const imageFullscreen1 = document.querySelector(".slide-container img:nth-child(1)");
const imageFullscreen2 = document.querySelector(".slide-container img:nth-child(2)");
const imageFullscreen3 = document.querySelector(".slide-container img:nth-child(3)");
document.querySelector(".lienImg1").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen1.style.display = "block";
slideIndex = 1;
};
document.querySelector(".lienImg2").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen2.style.display = "block";
slideIndex = 2;
};
document.querySelector(".lienImg3").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen3.style.display = "block";
slideIndex = 3;
};
// Close PopUp
document.querySelector(".out").onclick = function() {
photoGalleryFullscreen.style.display = "none";
imageFullscreen1.style.display = "none";
imageFullscreen2.style.display = "none";
imageFullscreen3.style.display = "none";
slideIndex = 1;
};
});
// Gallery Full Screen
let slideIndex;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".photo-fullscreen");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
// Photo Gallery
.photo-gallery-section {
margin: 50px 0;
.photo-gallery {
width: fit-content;
margin: auto;
display: grid;
grid-template-rows: 250px;
grid-template-columns: repeat(3, 250px);
justify-content: space-between;
gap: 3vw;
.photo:hover {
cursor: pointer;
}
.photo:nth-child(1) {
background: url(../static/images/yoga.jpg) center center / cover;
}
.photo:nth-child(2) {
background: url(../static/images/yoga-2.jpeg) center center / cover;
}
.photo:nth-child(3) {
background: url(../static/images/yoga-3.jpeg) center center / cover;
}
}
.photo-gallery-fullscreen {
display: none;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
z-index: 1;
.slide-container {
width: fit-content;
margin: calc(50vh - 225px) auto;
img {
height: 450px;
z-index: 3;
display: none;
}
}
.prev,
.next {
cursor: pointer;
color: white;
text-shadow: 0.8px 0.8px 4px white;
font-weight: bold;
font-size: 40px;
z-index: 3;
position: absolute;
}
.prev {
margin: calc(50vh - 21px) 0;
margin-left: 15vw;
left: 0;
}
.next {
margin: calc(50vh - 21px) 0;
margin-right: 15vw;
right: 0;
}
.out {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
}
}
}
<section class="photo-gallery-section" id="photo-gallery-section">
<h2 class="photo-gallery-title">Gallerie Photo</h2>
<div class="photo-gallery">
<div class="photo lienImg1"></div>
<div class="photo lienImg2"></div>
<div class="photo lienImg3"></div>
</div>
<div class="photo-gallery-fullscreen">
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
<div class="slide-container">
<img class="photo-fullscreen" />
<img class="photo-fullscreen" />
<img class="photo-fullscreen" />
</div>
<div class="out"></div>
</div>
</section>
Now I want to simplify the code but it's not working. Here is the new part of code :
// Open PopUp
const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
const imagesFullscreen = document.querySelectorAll(".slide-container img");
for (let i = 0; i < imagesFullscreen.length; i++) {
document.querySelectorAll(".photo").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imagesFullscreen[i].style.display = "block";
slideIndex = i;
}
}
Thank you very much for your help,
Maxime
EDIT : Here is the new code that is working :
// Open PopUp
const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
const imagesFullscreen = document.querySelectorAll(".slide-container img");
for (let i = 0; i < imagesFullscreen.length; i++) {
photo[i].onclick = function() {
photoGalleryFullscreen.style.display = "block";
imagesFullscreen[i].style.display = "block";
slideIndex = i;
}
// Close PopUp
document.querySelector(".out").onclick = function() {
photoGalleryFullscreen.style.display = "none";
imagesFullscreen[i].style.display = "none";
slideIndex = 1;
};
}

Prevent event overlap in custom jQuery image carousel

UPDATE: the solution I have posted below is not good enough, because it makes all the bullets except the active one non-responsive to clicks, instead of queueing them, so there is room for improvement.
I am working on a custom image carousel, using jQuery and CSS. My aim is to make it really lightweight but with (just) enough features: "bullets", auto-advance, responsiveness.
It works fine, but I have discovered a bug I was unable to fix: when I click 2 bullets in rapid succession - which means clicking the second before the transition triggered by the first is finished - the transitions overlap in a weird manner I can not describe but is visible below:
var $elm = $('.slider'),
$slidesContainer = $elm.find('.slider-container'),
slides = $slidesContainer.children('a'),
slidesCount = slides.length,
slideHeight = $(slides[0]).find('img').outerHeight(false),
animationspeed = 1500,
animationInterval = 7000;
// Set (initial) z-index for each slide
var setZindex = function() {
for (var i = 0; i < slidesCount; i++) {
$(slides[i]).css('z-index', slidesCount - i);
}
};
setZindex();
var displayImageBeforeClick = null;
var setActiveSlide = function() {
$(slides).removeClass('active');
$(slides[activeIdx]).addClass('active');
};
var advanceFunc = function() {
if ($('.slider-nav li.activeSlide').index() + 1 != $('.slider-nav li').length) {
$('.slider-nav li.activeSlide').next().find('a').trigger('click');
} else {
$('.slider-nav li:first').find('a').trigger('click');
}
}
var autoAdvance = setInterval(advanceFunc, animationInterval);
//Set slide height
$(slides).css('height', slideHeight);
// Append bullets
if (slidesCount > 1) {
/* Prepend the slider navigation to the slider
if there are at least 2 slides */
$elm.prepend('<ul class="slider-nav"></ul>');
// make a bullet for each slide
for (var i = 0; i < slidesCount; i++) {
var bullets = '<li>' + i + '</li>';
if (i == 0) {
// active bullet
var bullets = '<li class="activeSlide">' + i + '</li>';
// active slide
$(slides[0]).addClass('active');
}
$('.slider-nav').append(bullets);
}
};
var slideUpDown = function() {
// set top property for all the slides
$(slides).not(displayImageBeforeClick).css('top', slideHeight);
// then animate to the next slide
$(slides[activeIdx]).animate({
'top': 0
}, animationspeed);
$(displayImageBeforeClick).animate({
'top': "-100%"
}, animationspeed);
};
$('.slider-nav a').on('click', function(event) {
displayImageBeforeClick = $(".slider-container .active");
activeIdx = $(this).text();
if ($(slides[activeIdx]).hasClass("active")) {
return false;
}
$('.slider-nav a').closest('li').removeClass('activeSlide');
$(this).closest('li').addClass('activeSlide');
// Reset autoadvance if user clicks bullet
if (event.originalEvent !== undefined) {
clearInterval(autoAdvance);
autoAdvance = setInterval(advanceFunc, animationInterval);
}
setActiveSlide();
slideUpDown();
});
body * {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider .slider-nav {
text-align: center;
position: absolute;
padding: 0;
margin: 0;
left: 10px;
right: 10px;
bottom: 2px;
z-index: 30;
}
.slider .slider-nav li {
display: inline-block;
width: 20px;
height: 3px;
margin: 0 1px;
text-indent: -9999px;
overflow: hidden;
background-color: rgba(255, 255, 255, .5);
}
.slider .slider-nav a {
display: block;
height: 3px;
line-height: 3px;
}
.slider .slider-nav li.activeSlide {
background: #fff;
}
.slider .slider-nav li.activeSlide a {
display: none;
}
.slider .slider-container {
width: 100%;
text-align: center;
}
.slider .slider-container a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.slider .slider-container img {
transform: translateX(-50%);
margin-left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider slider-homepage">
<div class="slider-container">
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</a>
</div>
</div>
</div>
How could I prevent this phenomenon I would call, for lack of a better term, an event crowding (overlap)?

You can chain your animations using jQuery deferred object and Promise. Here is the class allowing you to do it easily.
var Queue = function() {
var lastPromise = null;
this.add = function(callable) {
var methodDeferred = $.Deferred();
var queueDeferred = this.setup();
// execute next queue method
queueDeferred.done(function() {
// call actual method and wrap output in deferred
callable().then(methodDeferred.resolve)
});
lastPromise = methodDeferred.promise();
};
this.setup = function() {
var queueDeferred = $.Deferred();
// when the previous method returns, resolve this one
$.when(lastPromise).always(function() {
queueDeferred.resolve();
});
return queueDeferred.promise();
}
};
The fiddle is with the animations queued.
PS: I increase the size of the buttons to click more easily
var $elm = $('.slider'),
$slidesContainer = $elm.find('.slider-container'),
slides = $slidesContainer.children('a'),
slidesCount = slides.length,
slideHeight = $(slides[0]).find('img').outerHeight(false),
animationspeed = 1500,
animationInterval = 7000;
// Set (initial) z-index for each slide
var setZindex = function() {
for (var i = 0; i < slidesCount; i++) {
$(slides[i]).css('z-index', slidesCount - i);
}
};
setZindex();
var setActiveSlide = function() {
$(slides).removeClass('active');
$(slides[activeIdx]).addClass('active');
};
var advanceFunc = function() {
if ($('.slider-nav li.activeSlide').index() + 1 != $('.slider-nav li').length) {
$('.slider-nav li.activeSlide').next().find('a').trigger('click');
} else {
$('.slider-nav li:first').find('a').trigger('click');
}
}
var autoAdvance = setInterval(advanceFunc, animationInterval);
//Set slide height
$(slides).css('height', slideHeight);
// Append bullets
if (slidesCount > 1) {
/* Prepend the slider navigation to the slider
if there are at least 2 slides */
$elm.prepend('<ul class="slider-nav"></ul>');
// make a bullet for each slide
for (var i = 0; i < slidesCount; i++) {
var bullets = '<li>' + i + '</li>';
if (i == 0) {
// active bullet
var bullets = '<li class="activeSlide">' + i + '</li>';
// active slide
$(slides[0]).addClass('active');
}
$('.slider-nav').append(bullets);
}
};
var Queue = function() {
var lastPromise = null;
this.add = function(callable) {
var methodDeferred = $.Deferred();
var queueDeferred = this.setup();
// execute next queue method
queueDeferred.done(function() {
// call actual method and wrap output in deferred
callable().then(methodDeferred.resolve)
});
lastPromise = methodDeferred.promise();
};
this.setup = function() {
var queueDeferred = $.Deferred();
// when the previous method returns, resolve this one
$.when(lastPromise).always(function() {
queueDeferred.resolve();
});
return queueDeferred.promise();
}
};
var queue = new Queue();
var slideUpDown = function(previousIdx, activeIdx) {
queue.add(function() {
return new Promise(function(resolve, reject) {
// set top property for all the slides
$(slides).not(slides[previousIdx]).css('top', slideHeight);
// then animate to the next slide
$(slides[activeIdx]).animate({
'top': 0
}, animationspeed);
$(slides[previousIdx]).animate({
'top': "-100%"
}, animationspeed, 'swing', resolve);
})
})
};
var previousIdx = '0' // First slide
$('.slider-nav a').on('click', function(event) {
activeIdx = $(this).text();
// Disable clicling on an active item
if ($(slides[activeIdx]).hasClass("active")) {
return false;
}
$('.slider-nav a').closest('li').removeClass('activeSlide');
$(this).closest('li').addClass('activeSlide');
// Reset autoadvance if user clicks bullet
if (event.originalEvent !== undefined) {
clearInterval(autoAdvance);
autoAdvance = setInterval(advanceFunc, animationInterval);
}
setActiveSlide();
slideUpDown(previousIdx, activeIdx);
previousIdx = activeIdx
});
body * {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider .slider-nav {
text-align: center;
position: absolute;
padding: 0;
margin: 0;
left: 10px;
right: 10px;
bottom: 2px;
z-index: 30;
}
.slider .slider-nav li {
display: inline-block;
width: 20px;
height: 6px;
margin: 0 1px;
text-indent: -9999px;
overflow: hidden;
background-color: rgba(255, 255, 255, .5);
}
.slider .slider-nav a {
display: block;
height: 6px;
line-height: 3px;
}
.slider .slider-nav li.activeSlide {
background: #fff;
}
.slider .slider-nav li.activeSlide a {
display: none;
}
.slider .slider-container {
width: 100%;
text-align: center;
}
.slider .slider-container a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.slider .slider-container img {
transform: translateX(-50%);
margin-left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider slider-homepage">
<div class="slider-container">
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</a>
</div>
</div>
</div>

Here is a possible fix, consisting of waiting for an animation to finish before starting another:
var $elm = $('.slider'),
$slidesContainer = $elm.find('.slider-container'),
slides = $slidesContainer.children('a'),
slidesCount = slides.length,
slideHeight = $(slides[0]).find('img').outerHeight(false),
animationspeed = 1500,
animationInterval = 7000;
// Set (initial) z-index for each slide
var setZindex = function() {
for (var i = 0; i < slidesCount; i++) {
$(slides[i]).css('z-index', slidesCount - i);
}
};
setZindex();
var displayImageBeforeClick = null;
var setActiveSlide = function() {
$(slides).removeClass('active');
$(slides[activeIdx]).addClass('active');
};
var advanceFunc = function() {
if ($('.slider-nav li.activeSlide').index() + 1 != $('.slider-nav li').length) {
$('.slider-nav li.activeSlide').next().find('a').trigger('click');
} else {
$('.slider-nav li:first').find('a').trigger('click');
}
}
var autoAdvance = setInterval(advanceFunc, animationInterval);
//Set slide height
$(slides).css('height', slideHeight);
// Append bullets
if (slidesCount > 1) {
/* Prepend the slider navigation to the slider
if there are at least 2 slides */
$elm.prepend('<ul class="slider-nav"></ul>');
// make a bullet for each slide
for (var i = 0; i < slidesCount; i++) {
var bullets = '<li>' + i + '</li>';
if (i == 0) {
// active bullet
var bullets = '<li class="activeSlide">' + i + '</li>';
// active slide
$(slides[0]).addClass('active');
}
$('.slider-nav').append(bullets);
}
};
var animationStart = false;
var slideUpDown = function() {
animationStart = true;
// set top property for all the slides
$(slides).not(displayImageBeforeClick).css('top', slideHeight);
// then animate to the next slide
$(slides[activeIdx]).animate({
'top': 0
}, animationspeed, function() {
animationStart = false;
});
$(displayImageBeforeClick).animate({
'top': "-100%"
}, animationspeed, function() {
animationStart = false;
});
};
$('.slider-nav a').on('click', function(event) {
if (animationStart) {
return false;
}
displayImageBeforeClick = $(".slider-container .active");
activeIdx = $(this).text();
if ($(slides[activeIdx]).hasClass("active")) {
return false;
}
$('.slider-nav a').closest('li').removeClass('activeSlide');
$(this).closest('li').addClass('activeSlide');
// Reset autoadvance if user clicks bullet
if (event.originalEvent !== undefined) {
clearInterval(autoAdvance);
autoAdvance = setInterval(advanceFunc, animationInterval);
}
setActiveSlide();
slideUpDown();
});
body * {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider .slider-nav {
text-align: center;
position: absolute;
padding: 0;
margin: 0;
left: 10px;
right: 10px;
bottom: 2px;
z-index: 30;
}
.slider .slider-nav li {
display: inline-block;
width: 20px;
height: 3px;
margin: 0 1px;
text-indent: -9999px;
overflow: hidden;
background-color: rgba(255, 255, 255, .5);
}
.slider .slider-nav a {
display: block;
height: 3px;
line-height: 3px;
}
.slider .slider-nav li.activeSlide {
background: #fff;
}
.slider .slider-nav li.activeSlide a {
display: none;
}
.slider .slider-container {
width: 100%;
text-align: center;
}
.slider .slider-container a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.slider .slider-container img {
transform: translateX(-50%);
margin-left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider slider-homepage">
<div class="slider-container">
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</a>
</div>
</div>
</div>

You could use a queue: every time you click a bullet it add to the queue and execute the queue. Something like this:
{
let
transitionQueue = [],
transitioning = false;
function doTransition() {
displayImageBeforeClick = $(".slider-container .active");
$('.slider-nav a').closest('li').removeClass('activeSlide');
transitionQueue.shift().closest('li').addClass('activeSlide');
// Reset autoadvance if user clicks bullet
if (event.originalEvent !== undefined) {
clearInterval(autoAdvance);
autoAdvance = setInterval(advanceFunc, animationInterval);
}
setActiveSlide();
slideUpDown();
if (transitionQueue.length)
setTimeout(doTransition, animationSpeed)
else
transitioning = false;
}
function callTransition() {
if (!transitioning) {
transitioning = true;
doTransition();
}
}
$('.slider-nav a').click(function () {
transitionQueue.push($(this));
callTransition();
});
}
I haven't tested this, so...

While this not strictly answering your question, one way you could solve your actual problem is by handling your slider differently, consisting of moving the slider instead of the slides :
1) Make the slides container absolute, and it's container relative
.slider-homepage {
position: relative;
}
.slider .slider-container {
position: absolute;
}
.slider .slider-nav {
//position: absolute; Remove this
}
2) Instead of positionning the slides on click, move the slider container to the right position
var slideUpDown = function() {
$('.slider-container').stop().animate(
{top: activeIdx * slideHeight * -1},
{duration: animationspeed}
);
};
This way no image will ever overlap.
Here is the fiddle, the code can certainly be refactored but I didn't have too much time to look into it, will try to post a snippet here asap if you're ok with not leaving your original thing of moving slides instead of the slider.

Reset JavaScript interval instead of clearing it

I am working on a custom image carousel, using jQuery and CSS. My aim is to make it really lightweight but with enough features.
The script has an auto feature that I want to be stopped if the user clicks a bullet. I am using clearInterval for this purpose.
I would like to reset that interval, instead of clearing it. In other words, when the user clicks a bullet, I want that interval between two slides to be a "full" one (of 4 seconds).
Here is the code:
var $elm = $('.slider'),
$slidesContainer = $elm.find('.slider-container'),
slides = $slidesContainer.children('a'),
slidesCount = slides.length,
slideHeight = $(slides[0]).find('img').outerHeight(false),
animationspeed = 300,
animationInterval = 4000;
// Set (initial) z-index for each slide
var setZindex = function() {
for (var i = 0; i < slidesCount; i++) {
$(slides[i]).css('z-index', slidesCount - i);
}
};
setZindex();
var displayImageBeforeClick = null;
var setActiveSlide = function() {
$(slides).removeClass('active');
$(slides[activeIdx]).addClass('active');
};
var advanceFunc = function() {
if ($('.slider-nav li.activeSlide').index() + 1 != $('.slider-nav li').length) {
$('.slider-nav li.activeSlide').next().find('a').trigger('click');
} else {
$('.slider-nav li:first').find('a').trigger('click');
}
}
var autoAdvance = setInterval(advanceFunc, animationInterval);
//Set slide height
$(slides).css('height', slideHeight);
// Append bullets
for (var i = 0; i < slidesCount; i++) {
var bullets = '<li>' + i + '</li>';
if (i == 0) {
// active bullet
var bullets = '<li class="activeSlide">' + i + '</li>';
// active slide
$(slides[0]).addClass('active');
}
$('.slider-nav').append(bullets);
};
var slideUpDown = function() {
// set top property for all the slides
$(slides).not(displayImageBeforeClick).css('top', slideHeight);
// then animate to the next slide
$(slides[activeIdx]).animate({
'top': 0
}, animationspeed);
$(displayImageBeforeClick).animate({
'top': "-100%"
}, animationspeed);
};
$('.slider-nav a').on('click', function(event) {
event.preventDefault();
displayImageBeforeClick = $(".slider-container .active");
activeIdx = $(this).text();
if ($(slides[activeIdx]).hasClass("active")) {
return false;
}
$('.slider-nav a').closest('li').removeClass('activeSlide');
$(this).closest('li').addClass('activeSlide');
// Stop autoadvance if user clicks bullet
if (event.originalEvent !== undefined) {
clearInterval(autoAdvance);
}
setActiveSlide();
slideUpDown();
});
body * {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider .slider-nav {
text-align: center;
position: absolute;
padding: 0;
margin: 0;
left: 10px;
right: 10px;
bottom: 2px;
z-index: 30;
}
.slider .slider-nav li {
display: inline-block;
width: 20px;
height: 3px;
margin: 0 1px;
text-indent: -9999px;
overflow: hidden;
background-color: rgba(255, 255, 255, .5);
}
.slider .slider-nav a {
display: block;
height: 3px;
line-height: 3px;
}
.slider .slider-nav li.activeSlide {
background: #fff;
}
.slider .slider-nav li.activeSlide a {
display: none;
}
.slider .slider-container {
width: 100%;
text-align: center;
}
.slider .slider-container a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.slider .slider-container img {
transform: translateX(-50%);
margin-left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider slider-homepage">
<ul class="slider-nav"></ul>
<div class="slider-container">
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=west" alt="">
</a>
</div>
</div>
</div>
I have not figured out how to do that.

Like #epascarello said in a comment above, just clear & start again:
if (event.originalEvent !== undefined) {
clearInterval(autoAdvance);
autoAdvance = setInterval(advanceFunc, animationInterval);
}
later edit:
If the callback or the interval are not available anymore when restarting, it could help to "save" them in a closure:
function startInterval(func, delay) {
var id = setInterval(func, delay);
return {
stop: function() { clearInterval(id); },
restart: function() { clearInterval(id); id = setInterval(func, delay); }
};
}
var autoAdvance = startInterval(advanceFunc, animationInterval);
//later
autoAdvance.restart();

Clickable bubble control auto slideshow pure JavaScript

How could I link the marked bubble to JavaScript auto slider (window.setInterval(function slideA() { ) ? Check codes to understand this issue. The slides go automatically, but the bubble only react on clicks.
var imagecount = 1;
var total = 3;
function slide(x) {
var Image = document.getElementById('img');
var nodes = document.getElementById('bubbles').getElementsByTagName('div');
for(var i=0; i<nodes.length; i++) {
if(i == imagecount-1) {
nodes[i].style.backgroundColor = '#F86215';
}
else {
nodes[i].style.backgroundColor = 'transparent';
}
}
imagecount = imagecount + x;
if (imagecount > total){ imagecount = 1;}
if (imagecount < 1){ imagecount = total;}
Image.src = "IMAGE/img"+ imagecount +".jpg";
}
window.setInterval(function slideA() {
var Image = document.getElementById('img');
imagecount = imagecount + 1;
if (imagecount > total){ imagecount = 1;}
if (imagecount < 1){ imagecount = total;}
Image.src = "IMAGE/img"+ imagecount +".jpg";
}, 5000);
function selectSlide(slideNumber){
imagecount = slideNumber;
var Image = document.getElementById('img');
Image.src = "IMAGE/img"+imagecount +".jpg";
}
function selectSlide(slideNumber, divid){
var nodes = document.getElementById('bubbles').getElementsByTagName('div');
for(var i=0; i<nodes.length; i++) {
nodes[i].style.backgroundColor = 'transparent';
}
divid.style.backgroundColor = '#F86215';
imagecount = slideNumber;
var Image = document.getElementById('img');
Image.src = "IMAGE/img"+imagecount +".jpg";
}
#img {
width: 100%;
position: relative;
height: auto;
}
.container-fluid {
width: 100%;
height: auto;
position: relative;
}
.container-fluid #left-arrow .left {
width: 60px;
position: absolute;
top: 31%;
left: 0px;
}
.container-fluid #right-arrow .right {
position: absolute;
top: 31%;
right: 0px;
width: 60px;
}
.container #left-arrow .left:hover {
cursor:pointer;
cursor: hand;
}
.container #right-arrow .right:hover {
cursor:pointer;
cursor: hand;
}
#bubbles{
width: 120px;
margin: 0px auto;
text-align: center;
top: 80%;
position: absolute;
left: 45%;
}
#bubbles > div{
display: inline-block;
width: 10px;
height: 10px;
margin: 24px 10px 0px 10px;
background: rgba(0,0,0,.1);
text-align: center;
border: 2px solid #F86215;
border-radius: 100%;
font-size: 19px;
text-decoration: none;
transition: background 0.3s linear 0s;
cursor: pointer;
}
<div class="container-fluid">
<img src="IMAGE/img1.jpg" alt="" id="img"/>
<div id="left-arrow"><img onClick="slide(-1)" class="left" src="IMAGE/arrow-left.png" alt=""/></div>
<div id="right-arrow"><img onClick="slide(1)" class="right" src="IMAGE/arrow-right.png" alt=""/></div>
<div id="bubbles">
<div onclick="selectSlide(1,this)" style="background:#F86215;"></div>
<div onclick="selectSlide(2,this)"></div>
<div onclick="selectSlide(3,this)"></div>
</div>
</div>

Took a while to get a JS only answer working, but here it is!
Updated HTML
<div id="bubbles">
<div class="bubble" onclick="selectSlide(1,this)" style="background:#F86215;"></div>
<div class="bubble" onclick="selectSlide(2,this)"></div>
<div class="bubble" onclick="selectSlide(3,this)"></div>
</div>
Updated Javascript
window.setInterval(function slideA() {
var image = document.getElementById('img');
imagecount = imagecount + 1;
if (imagecount > total) {
imagecount = 1;
}
if (imagecount < 1) {
imagecount = total;
}
image.src = "IMAGE/img" + imagecount + ".jpg";
var bubbles = document.getElementsByClassName("bubble");
var i;
for(i = 0; i < bubbles.length; i++) {
bubbles[i].style.backgroundColor = 'transparent';
}
document.getElementsByClassName("bubble")[imagecount - 1].style.backgroundColor = '#F86215';
}, 5000);
JSFiddle