tucsondonpepe Posted August 24, 2016 Share Posted August 24, 2016 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 More sharing options...
justsomeguy Posted August 24, 2016 Share Posted August 24, 2016 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 More sharing options...
dsonesuk Posted August 25, 2016 Share Posted August 25, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now