The JavaScript array slideshow is experiencing some glitches in its transition

Question

The JavaScript array slideshow is experiencing some glitches in its transition

After diving into JavaScript recently, I managed to center a div and make it fullscreen as the window resizes. However, things got tricky when I added a script I found online to create an image transition using an array. Unfortunately, these scripts are conflicting and causing issues with the animation, especially when resizing the window. Check out my jsfiddle link below to see what I mean. Any help would be greatly appreciated.

http://jsfiddle.net/xPZ3W/

function getWidth() {
var w = window.innerWidth;
x = document.getElementById("wrapper");
x.style.transition = "0s linear 0s";
x.style.width= w +"px"; 
}

function moveHorizontal() {
var w = window.innerWidth;
x = document.getElementById("wss");
x.style.transition = "0s linear 0s";
x.style.left= w / 2 -720 +"px" ;         
}

function moveVertical() {
var h = window.innerHeight;
x = document.getElementById("wss");
x.style.transition = "0s linear 0s";
x.style.top= h / 2 -450 +"px" ;         
}

var i = 0; 
var wss_array = ['http://cdn.shopify.com/s/files/1/0259/8515/t/14/assets/slideshow_3.jpg?48482','http://cdn.shopify.com/s/files/1/0259/8515/t/14/assets/slideshow_5.jpg?48482'];   
 var wss_elem;

function wssNext(){

  i++;                                 
  wss_elem.style.opacity = 0; 

if(i > (wss_array.length - 1)){           
i = 0;                           
 }
 setTimeout('wssSlide()',1000);
}


function wssSlide(){
 wss_elem = document.getElementById("wss")
 wss_elem.innerHTML = '<img src="'+wss_array[i]+'">';       
 wss.style.transition = "0.5s linear 0s";

 wss_elem.style.opacity = 1;

setTimeout('wssNext()',3000); 
}

javascript html css

Answer 1

Answer №1

After creating this unique JSFiddle from scratch, I believe it will be a helpful tool for you. It showcases pure CSS transitions between classes using an array of URLs to smoothly switch among different pictures.

The code essentially progresses the "active" class to the next one each time it is called, assuming the first picture is initially set as the "active" class.

var pics = document.getElementById('slideshow').children,
    active = 0;

function slideshow() {
    for (var i = 0; i < pics.length; i++) {
        if (i == active && pics[i].className == "active") {
            console.log(i, active, (active + 1) % pics.length);
            active = (active + 1) % pics.length;
        }
        pics[i].className = "";
    }
    pics[active].className = "active";
    setTimeout(slideshow, 2000);
}
setTimeout(slideshow, 2000);

Additionally, here is the CSS that positions the container absolutely and only displays its children with the active class in a smooth transition effect.

#slideshow {
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 20%;
    right: 20%;
}
#slideshow img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    opacity: 0;
    transition: opacity 1s linear;
}
#slideshow .active {
    opacity: 1;
}

Answer 2

After creating this unique JSFiddle from scratch, I believe it will be a helpful tool for you. It showcases pure CSS transitions between classes using an array of URLs to smoothly switch among different pictures.

The code essentially progresses the "active" class to the next one each time it is called, assuming the first picture is initially set as the "active" class.

var pics = document.getElementById('slideshow').children,
    active = 0;

function slideshow() {
    for (var i = 0; i < pics.length; i++) {
        if (i == active && pics[i].className == "active") {
            console.log(i, active, (active + 1) % pics.length);
            active = (active + 1) % pics.length;
        }
        pics[i].className = "";
    }
    pics[active].className = "active";
    setTimeout(slideshow, 2000);
}
setTimeout(slideshow, 2000);

Additionally, here is the CSS that positions the container absolutely and only displays its children with the active class in a smooth transition effect.

#slideshow {
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 20%;
    right: 20%;
}
#slideshow img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    opacity: 0;
    transition: opacity 1s linear;
}
#slideshow .active {
    opacity: 1;
}

The JavaScript array slideshow is experiencing some glitches in its transition

Answer №1

Similar questions

What is the best way to eliminate the unattractive white border surrounding dialog boxes?

Having difficulty interpreting the json data retrieved from the specified url

There appears to be a malfunction with certain hyperlinks on the table

Cropped portion of the captcha image located on the left side

The candy stripes on a loading bar zebra assist in creating a unique and

[VUE Alert]: Rendering Error - "Sorry, there is a type error: object is currently undefined."

What is causing the reluctance of my Angular test to accept my custom form validation function?

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Can you explain the process of extracting images from JSON data using AJAX and jQuery?

The limitations of Typescript types influence the program's behavior

Developing an HTML table for room reservations using PHP - a comprehensive booking system

How can I use JQuery to iterate through Object data and dynamically create tr and td elements?

Attempting to utilize Vue js to connect to an API

Retrieve a value using the jQuery each() method

Are there any tools available that can convert inline styles into CSS classes?

CSS swapping versus CSS altering

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

What is the best way to display a child element in the right panel?

Is it possible for me to include an ::after pseudo-element within a label that contains an input field?

The usage of CSS pseudo elements with the position absolute property