Dear stackoverflow users,
I'm working on a project for myself and i run into a js problem.
I'm trying to make a slide with 3 employees on my homepage.
Default it will show image 1, image 2 and image 3.
When i press the back icon, i needs to go to:
Image 4, image 1 and image 2.
My code so far (Only backwards!)
let sliderImages = document.querySelectorAll('.slide');
let arrowBack = document.querySelector('#arrow-back');
let arrowNext = document.querySelector('#arrow-next');
let currentOne = 0;
let currentTwo = 1;
let currentThree = 2;
// Make employees transparent
function reset(){
for(let i = 0; i < sliderImages.length; i++){
sliderImages[i].style.display = 'none';
}
}
// Make employee 1 visable
function startSlide(){
reset();
sliderImages[0].style.display = 'inline-block';
sliderImages[1].style.display = 'inline-block';
sliderImages[2].style.display = 'inline-block';
}
// Show command backwards
function slideBack(){
reset();
sliderImages[currentOne - 1].style.display = 'inline-block';
sliderImages[currentTwo - 1].style.display = 'inline-block';
sliderImages[currentThree - 1].style.display = 'inline-block';
currentOne--;
currentTwo--;
currentThree--;
}
// Back arrow clicked
arrowBack.addEventListener('click', function(){
if(currentOne === 0){
currentOne = sliderImages.length;
}
if(currentTwo === 0){
currentTwo = sliderImages.length;
}
if(currentThree === 0){
currentThree = sliderImages.length;
}
slideBack();
})
When i refresh the page i see Image 1, 2 and 3 so that works. But it doesn't go to 4, 1 and 2 when i press #arrow-back.
I know the structure isn't perfect with my 3x if, but i'm just learning to understand Javascript.
Can any of you guys give me some tips with how i can progress my project?
Thanks a lot.
Great,
Loxiuras
(Be notest that my html works. It will change the images, but it doesn't get the right order.)
Related
I have a slider on my website page, and I wanted to create a link that redirects to a specific slide of the slider, that contains 3 slides. Because I'm a beginner in javascript, I tried the easiest way that I could think, which is to click a certain number of times according to the current slide, so for example, if my current slide position is equal to 2[0,1,2], and I want to go to position 1, I can press the next button 2 times using a Javascript click() event. It's working like a charm, but when I click for the second time, it doesn't work. I would like to know why this is happening.
const mySlide = document.querySelectorAll('.mySlides');
let counter = 1;
slidefun(counter);
let timer = setInterval(autoSlide, 8100);
function autoSlide() {
counter += 1;
slidefun(counter);
}
function plusSlides(n) {
counter += n;
slidefun(counter);
resetTimer();
}
function currentSlide(n) {
counter = n;
slidefun(counter);
resetTimer();
}
function resetTimer() {
clearInterval(timer);
timer = setInterval(autoSlide, 8100);
}
function slidefun(n) {
let i;
for(i = 0;i<mySlide.length;i++){
mySlide[i].style.display = "none";
}
if(n > mySlide.length){
counter = 1;
}
if(n < 1){
counter = mySlide.length;
}
mySlide[counter - 1].style.display = "block";
}
const slide2 = document.getElementById('slide2');
var slideButton = document.getElementById('myButton');
slideButton.addEventListener('click', openSlide);
nextButton = document.getElementsByClassName('next');
nextButton.addEventListener('click', slideSelected);
function slideSelected(){
if(currentSlide == currentSlide(0)){
nextButton.click()
}else if(currentSlide == currentSlide(2)){
nextButton.click();
nextButton.click();
}
}
I'm trying to create a gallery. Most of it already works thanks to some online tutorials.
On the final page there should be a slider and also some thumbnails to click on which will effect the slider. I tried to achieve this by working with status. The problem I'm facing right now is to change the status when clicking on the matching img.
const imgs = document.querySelectorAll('.imgs img');
let status = 0;
var num = document.querySelectorAll('.profile_pics img').length;
let maxstatus = status + num;
imgs.forEach(img => img.addEventListener('click', imgClick));
function imgClick(){
for(let f = 0; f < imgs.length; f++){
if(imgs[f].click == true){
status = [f];
}
}
}
// Rest of the code (is working)
function reset(){
for(let i = 0; i < maxstatus; i++){
slides[i].style.display = 'none';
slides[i].style.opacity = 0;
slides[i].classList.add('fade_in');
imgs[i].style.opacity = 1;
}
}
function focus(){
imgs[status].style.opacity = opacity;
}
function startSlide(){
reset();
slides[0].style.display = 'block';
}
function slideLeft(){
reset();
slides[status - 1].style.display = 'block';
status--;
focus()
console.log(status);
}
function slideRight(){
reset();
slides[status + 1].style.display = 'block';
status++;
focus()
console.log(status);
}
prevBtn.addEventListener('click', function(){
if(status === 0){
status = maxstatus;
}
slideLeft();
});
nextBtn.addEventListener('click', function(){
if(status === maxstatus - 1){
status = -1;
}
slideRight();
});
startSlide();
I've tried now for a couple of hours but can't find a solution. Worked with console.log of course but simply can't get the status update working when clicking of one of those images.
Help would be appreciated - Thanks a lot
Full Code Can Be Found Here: Paste Bin Link
Update:
// Global Variable
let status = -1;
let imgs = [
$('#img0'),
$('#img1'),
$('#img2'),
$('#img3'),
$('#img4'),
$('#img5'),
]
// Functions
function imgClick(elm){
status = imgs.indexOf(elm); // This will set the status variable to the element index, using indexOf function. it will check inside of imgs variable which element index it is, if it cant be found status will return a -1 value
}
// Execute
imgs.forEach(img => img.on('click', () => {
imgClick(img);
}));
I want to create a fullscreen image slider in js so I watched a tutorial and I understand most of it beside the 'counter'.I know that its representing the current image but I don't know how it doing that, how is assigned.
HERE IS THE CODE
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0; (!!!!THIS ONE I DON`T UNDERSTAND HOW IT S REPRESENTING THE CURRENT IMAGE!!!
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
!! HERE IS THE LINK FROM TUTORIAL https://youtu.be/7ZO2RTMNSAY
Current is being used for the index of the array that contains all the elements with the class name of slide.
It might be beneficial for you to read more about arrays: https://www.w3schools.com/js/js_arrays.asp
I am currently creating a website for a friend and I'm having an issue I can't seem to figure out. I am sure its a simple method call to what I already have. So the problem seems to be that after the slider reaches the end of the photos it just shows a blank screen and doesn't reset to the start again. what would I need to call or what method would I need to make in order to get this to work correctly. It already works when using the arrows themselves but not the auto slide. Thank you in advance.
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
//Slides after aprrox 10 seconds
function startTimer() {
setInterval(slideRight, 10000);
}
// Init slider
function startSlide() {
startTimer();
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
When you click the right arrow, you use this code:
if (current === sliderImages.length - 1) {
current = -1;
}
...to make sure you stop and the end of the images and don't try to go too far. But your setInterval() calls slideRight() directly, which has no protection against going too far.
Probably, current should be reset to zero as you call slideRight() and fall off the end of the array.
// Show next
function slideRight() {
reset();
if (current > sliderImages.length -1) {
current = 0;
}
sliderImages[current].style.display = "block";
current++;
}
Incidentally, you might want to take a look at bootstrap carousel feature https://getbootstrap.com/docs/4.0/components/carousel/
Ended up fixing it by using carousol type function here is the code I used to replace the startSlide function, Thank you all for the help!
function carousel(){
reset();
current++;
if (current > sliderImages.length){
current = 1
}
sliderImages[current-1].style.display = "block";
setTimeout(carousel, 7000);
}
I am creating an image slider for JavaScript. I have it so that my left and right arrows display the next image. I was thinking to add a setInterval method to just change the display image every few seconds. I was assuming it would be as easy as calling the function to click the right image every 3 seconds. But I get an error saying
index.js:26 Uncaught TypeError: Cannot read property 'style' of undefined
at slideRight (index.js:26)
Heres my code
let sliderImages = document.querySelectorAll('.slide');
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let current = 0;
function reset() {
for(let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function startSlider() {
reset();
sliderImages[0].style.display = 'block';
}
function slideLeft() {
reset();
sliderImages[current - 1].style.display = 'block';
current --;
}
function slideRight() {
reset();
sliderImages[current + 1].style.display = 'block';
console.log(current);
current ++;
console.log(current);
}
arrowLeft.addEventListener('click', function() {
reset()
if(current == 0) {
current = sliderImages.length;
}
slideLeft();
});
arrowRight.addEventListener('click', function () {
if(current == sliderImages.length -1 ) {
current = -1;
}
slideRight();
})
startSlider();
setInterval(slideRight, 3000);
Your problem seems to me to be that when you go too far right that index no longer exists in the array, so you need to use the modulus operator when going right:
sliderImages[(current + 1) % sliderImages.length].style.display = 'block';
And you need to wrap around to the right side when going left too far:
sliderImages[current - 1 >= 0 ?
current - 1 : sliderImages.length - 1].style.display = 'block';
The problem is in sliderImages[current + 1].
When you reach the lastest image current + 1 is an out of bound index and the cooresponding entry in sliderImages returns null.
You probably need to check something like
if (current < sliderImages.length) {
sliderImages[current + 1].style.display = 'block';
current++;
}