Jump to content

Faded Animation


tucsondonpepe

Recommended Posts

Hi,

 

Since this is my first post, I hope I am posting in the correct area. If not, please me me know.

 

I am developing a one-page mock-up website for a 55+ community that I live in in Mount Juliet, Tennessee as a volunteer, The URL is http://www.joelestingi.com/dwlp/. I used the code from the Faded Animation information, http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading, to develop the slider.

 

Since the slider is working correctly, it appears I made the correct modifications. However, there are two issues I need help with.

 

The first is the padding above and below the slider image. I attempted to search the CSS file and found a lot of padding commands, but did not know which one to select.

 

The second issue is that after an image fades, it abruptly disappears. The next image then fades in. When I run the code in http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading, the fade in and fade out work correctly.

 

Would appreciate your help with this. Thank you.

 

Joe

Link to comment
Share on other sites

You can use your browser's developer tools to look at the CSS. If you right-click on one of those images and select something like Inspect Element, the developer tools will open and have that element selected. You can see all of the CSS rules that apply to it (and the files and lines where they come from) and even change them and see the results in real time. The element you're actually looking for is the div that contains all of the images, and its margins.

 

Your other issue is because you have the CSS saying to take 10 seconds to fade in and out, but your function that runs to change the images has a delay of only 3.5 seconds. So the function changes the image before the CSS animation finishes.

Link to comment
Share on other sites

All you have to do is make a duration variable that you can use to set setTimeout() and reset animation duration to match.

var myIndex = 0;
var myduration =10000;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
   
    x[myIndex-1].style.display = "block"; 
 x[myIndex-1].style.animationDuration=(myduration/1000)+"s"; 
    setTimeout(carousel, myduration);    
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...