Witam. Zrobilem sobie slider na background-image przy pomocy css i jQuery. Wszystko smiga na Chrome, ale na edge i firefoxie sie wysypuje. Ktos wie co robie zle?
Kod HTML
<section id="whoAreWe">
<h2><a href="whoarewe.php">Who are we?</a></h2>
<h3>We are a team of professionals</h3>
<article>
<span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi itaque, tempore! Accusantium
aspernatur aut blanditiis esse eveniet ex excepturi facilis inventore, natus perferendis quasi
ratione recusandae, rem sapiente unde voluptate? Located in
Barrie
<a href="whoarewe.php">Read more</a>
</p>
</span>
</article>
</section>
Kod scss
@mixin background($path) {
//image
-webkit-background-image: url($path);
-moz-background-image: url($path);
-o-background-image: url($path);
background-image: url($path);
//cover
-webkit-background-size: cover;
-o-background-size:cover;
-moz-background-size:cover;
background-size: cover;
//transition
transition-duration: 1s;
-webkit-transition: background-image 1s linear;
-moz-transition: background 1s linear;
-o-transition: background-image 1s linear;
transition: background-image 1s linear;
//Rest
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
}
@mixin backgrounds($page) {
@media screen and (max-width: 450px) {
article {
@include background("../Assets/Images/Cropped/Phone 425x640/"+$page+"/pp1.jpg");
background-size: cover;
}
}
@media screen and (min-width: 451px) {
article {
@include background("../Assets/Images/Copies/"+$page+"/pp1.jpg");
}
}
section#whoAreWe {
@include backgrounds("whoAreWe");
}
Kod JS
if (viewportWidth > 1400 && document.title == "3B Solutions") {
$(document).ready(function () {
zmienTlo("whoAreWe");
});
}
// CHANGE THIS VARIABLE
var ileZdjec = 5;
// DO NOT TOUCH
var ktoreZdj = 0;
var sekcjaa;
function zmienTlo(sekcja) {
sekcjaa = "section#" + sekcja + ">article";
if (ktoreZdj > ileZdjec - 1)//Zaczynamy od 0
ktoreZdj = 0;
$(sekcjaa).css("background-image", "url(\"Assets/Images/Copies/" + sekcja + "/pp" + ktoreZdj + ".jpg\")");
ktoreZdj++;
return setTimeout(function () {
zmienTlo(sekcja);
}, 3000);
}