CSS Slider does not work in FireFox

Question

I try to make a little slider, but it works only in Google Chrome.

In FireFox (version 47) it doesn't work.

The CSS file is that:

#home-container {
width: 500px;
height: 300px;
background-image: url("img1.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

and the HTML (with a little script):

<!DOCTYPE html>
<html>
<head>
    <title>CSS Slider</title>
    <link rel="stylesheet" href="style.css"/>
    <script>
        var index = 0;
        function changeImage() {
            var imgArr = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
            document.getElementById("home-container").style.backgroundImage = "url('" + imgArr[index] + "')";
            index++;
            if (index >= imgArr.length) {
                index = 0;
            }
        }
        setInterval(changeImage, 2000);
    </script>
</head>
<body>
    <div id="home-container">
    </div>
</body>
</html>

PS: I need a solution for that code, not an alternative to use jQuery.

When you say it doesn't work - how do you mean? Is there an error? Is the behaviour unexpected? @Doro — Mark, Jul 26 '16 at 20:06
The behavior it isn't what should have to be. For example, in Chrome the images are changed with a slide effect, but in Firefox are instantly changed without any effects. — Doro, Jul 26 '16 at 20:15

score 0 · Answer 1 · answered Jul 26 '16 at 20:21

0

Can u try to add transition-delay (4th parameter) equal 0, into all properties?

answered Jul 26 '16 at 20:21

uamanager

1,128
8
11

Yes, it works, but I need a side effect, not a delay... I think I will build it with jQuery.... – Doro Jul 26 '16 at 20:37

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

Firefox won't support it according to this bug nor is it an animatable property (https://www.w3.org/TR/css3-transitions/#animatable-properties).

See this awswer for details.

edited May 23 '17 at 12:08

Community

1
1

answered Jul 26 '16 at 20:24

Will

111
1
8

Thanks for answer. – Doro Jul 26 '16 at 20:35

score 0 · Answer 3 · answered Jul 27 '16 at 21:51

0

Maybe you can play with the opacity attribute. Check this: http://www.quirksmode.org/js/opacity.html is a way to set opacity in all elemnts.

answered Jul 27 '16 at 21:51

rebduvid

1,104
10
13

CSS Slider does not work in FireFox

3 Answers3