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

Sequential invocations to console.log yield varying outcomes

Manipulating visibility of an input tag using JQuery

formula for an arbitrary velocity vector

What purpose does the class serve in typescript?

What is the best way to update a page and retrieve fresh data from a service in Angular?

Stop bullet points from overlapping when using a floating left image in Internet Explorer 9 and above

Passing both the event and a local Vue variable to a bound function in a idiomatic manner

Strategies for aligning a div element in the middle of the screen

Verification of custom data type validation

Execute a script once the AngularJS view has finished loading

Create a dynamic animation effect by making a div slide on and off the screen

Enhance visual content using JavaScript to filter images in React

To avoid any sudden movements on the page when adding elements to the DOM using jQuery, is there a way to prevent the page from

Struggling to retrieve information using the filter() method in MongoDB

Why won't JQuery .ajax send my request?

Converting a tree structure from GraphQL to JSON format using JavaScript

Connect the mileage tracker to a Datalist or grid view component

JavaScript - Utilizing appendChild as soon as an element becomes available

Swapping out the current div with the outcome from jQuery

The Node.js application successfully receives an emit event from the browser, however, the browser does not receive any emit